Question

I have found a bug in IE9 but googling for it hasn’t helped finding any solution yet.

The following works fine in FF 3 + 4, Chrome, Opera and even IE8, but not in IE9.

The HTML:

<div class="outer">
    <p class="inner">Lorem ipsum dolor</p>
</div>

The CSS:

div p {
    font-size: 1.2em;
}
div p:after {
    content: " sit amet";
}

div p:after {
    font-size: 1.3em;
}
div.outer p:after,
div p.inner:after {
    font-size: 3em;
}

The “sit amet” is huge in IE9, as it seems to multiply the font-size again and again. It’s not possible to overwrite it with “!important” or other means of increasing the specificity (as e.g. the “div.outer” should already do it). It even seems that it gets multiplied within the same declaration, i.e. div.outer p:after, div p.inner:after won’t multiply by 3, but by 9!

(Please note that the “inner” and “outer” classes are not necessary here. The same happens by declaring div p {} again and again. But it makes only sense with classes as a real-world example.)

Here is a test page: http://dl.dropbox.com/u/4667354/temp/ie9-bug.html

Is there any solution?

Edit:

To clarify two misunderstandings:

1. The bug is not the usual behaviour that child elements multiply the font-size of its parent when em are used. The bug is that font-sizes in generated content cannot be overwritten and will multiply anyway when trying to. I.e. setting the font-size in div p:after once works, but setting it again multiplies instead of overwrites it.
2. To better see what the problem is (in case you don’t have IE9 at hand), here are two screenshots of the test page: in IE8 and any other modern browser and in IE9.

Answer 1

You could try using rem instead of em, IE9 supports it, then your sizes will then be relative to the base font size instead of multiplying together. Here’s a good explanation.

I would guess the difference here is that IE9 is treating the generated content as a child element while the other browsers aren’t, hence the multiplication.