Hover link-menu not working on IE 11, pseudo classes ignored

StackOverflow https://stackoverflow.com/questions/21211458

Question

i'm trying to do a menu like this one for a project in the making but IE 11 keeps ignoring the pseudo classes. 

 +<!doctype html>
    <html>
        <head>
            <meta charset="utf-8">

etc...

I have +<!doctype html> because if i remove the + the elements get disorted in chrome for some reason, and altough i've tried removing it because from what i've heard ie forces itself into quircks mode thus not being able to handle pseudo classes doing so does not solve the problem, even with <!doctype html> ie ignores the css and then chrome gets it's view all messed up.

here's a fiddle with the code copy-pasted from what i'm doing. if you remove the #botao span:after you'll see how it renders on IE

fiddle

i've only tested the code on chrome, firefox and ie so far and i tried javascript to detect ie and hide the menu and show a different one but it also didn't work, and older browsers won't be a problem because css3 transforms won't occur leaving the first links in the place (or so i suspect. have to test it later on)

Was it helpful?

Solution

Pseudo class works in IE if you give the anchor tag a reference target. For example:

<span class="hoverlink"><a href=#>Hover over me</a></span>

.hoverlink a, .hoverlink a:visited, .hoverlink a:link{color:red;}
.hoverlink a:hover{color:green;}

Try putting in an "href" and see all the difference it makes in IE!

If you need an element other than the A tag to support pseudo class you'll have to use a doctype. And yes, it breaks the layout for some old IEs not because it enters quirks mode. Quite on the contrary, it leaves quirks mode, and "tries" to conform to standards and miserably fails.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top