IE9 bug with increased font-size of css content

问题

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:

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.
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.

回答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.

回答2:

This might have something to do with the difference between the parsed DOM trees from IE8 to IE9.

Internet Explorer 8:

<html>
- <head>
- <body>
  - <div class="outer">
    - <p class="inner">
      - Text - Lorem ipsum dolar

Internet Explorer 9:

<html>
- <head>
- <body>
  - Text - Empty Text Node
  - <div class="outer">
    - Text - Empty Text Node
    - <p class="inner">
      - Text - Lorem ipsum dolar
    - Text - Empty Text Node
  - Text - Empty Text Node

Bonus Reading

Interoperable HTML Parsing in IE9

回答3:

There is a work-around that allows font-sizes to be relative (em or %): add another class with the pseudo-element font-size reducing the size.

I've put together a fiddle showing the workaround but the basic code is below:

<p class="one">Test (1.25em = 20px)</p>
<p class="one two">Test (2em = 32px but 2.5em = 40px in IE)</p>
<p class="one one-ie two">Test (2em = 32px)</p>

The styles then look like this:

body {
    font-size: 16px;
}

.one::before {
    content:      "::before";
    font-family:  monospace;
    font-size:    1.25em;
    margin-right: 10px;
}

.one-ie::before {
    font-size: 0.8em;
}

.two::before {
    font-size: 2em;
}

Most browsers will override the .one-ie::before selector with .two::before and IE's compounding will essentially negate the previous font-size. If IE fix the bug and allow pseudo-element styles to override rather than compound, the hack gets overridden like every other browser.