How can I prevent IE from composing relative font sizes in pseudo-elements?

advertisements

I have some icons that are set via pseudoelement in CSS, like this:

.button a:before {
  font-size: 1.3em;
  font-family: font-awesome;
  content: "*";
}

And there are other, similar declarations elsewhere, like

.button .otherclass a:before {
  font-size: 1.35em;
}

This works fine with modern web browsers, but IE >= 9 compounds all the font sizes, so that the resulting icon is enormous (like 5 times its size). How can I prevent this from happening?

(BTW, the actual code with the problem is here.)


This is a bug in IE, as reported on the Microsoft Connect page mentioned by @Aibrean, but the page also shows that Microsoft does not admit that this is a bug (they say they cannot reproduce it). It can be reproduced in IE 11 on Win 7 with the following simple document:

<style>
.foo, .bar:before {
  font-size: 2em;
  content: "X";
}
.bar:before {
  font-size: 5em;
}
</style>
X<span class=foo>X</span>
<span class=bar>bar</span>

The second X should be 5 times as big as normal X, but it is actually 10 times as big in IE, since IE incorrectly multiplies the effects of 2em and 5em.

The workaround, it seems, is to organize your style sheet so that the font size of generated content is set once only for each element. That is, so that there are no two font-size declarations that apply to the same :before or :after pseudo-element.