Non-standard font behavior in Internet Explorer: after and: after :: hover pseudo classes
I found an internet explorer bug today that left me confused. Apparently Internet Explorer doubles (?) Font size: after class if font size is set for both: after and: hover :: after.
I installed a quick demo and came up with a workaround which I don't like as it won't work if you want to display content in both: after and: hover :: after states. Does anyone know what might be causing this behavior and how to fix it?
http://jsfiddle.net/q15Lw90d/7/
:hover{} /* Fixes pseudo-element animation on :hover
for Internet Explorer 10 */
.workaround::after {
content: "";
font-size:2em;
}
.workaround:hover::after {
color:green;
content:", internet explorer";
}
.iebug::after {
content: "";
font-size:2em;
}
.iebug:hover::after {
color:green;
font-size:2em;
content:", internet explorer";
}
source to share
Testing your JS.Fiddle I was getting the same issue in IE. I found that if I changed font-size
from em
to px
the hover content displayed as expected. You can see the update script here .
I did a little research and found this quote on the CSS-Tricks website and I believe the same concept is happening in your case.
There are a few more unpleasant things with ems, for example, with a cascade. If you decide that the list items should be font size: 1.1em followed by nested lists, it will cascade and increase the font size for child lists. You probably didn't want that. You can fix this with li li {font-size: 1em; }, but this is what your pumpkin can grind. This is where it might come, but it's tricky too. as browser support is less (IE 9+).
All that can be said is you can change the font size to use something other than em
, and you should be good.
You can read a similar question posted here on SO .
source to share