IE9错误增加了css内容的字体大小

Question

我在IE9中发现了一个错误,但谷歌搜索它还没有帮助找到任何解决方案.

以下在FF 3 + 4,Chrome,Opera甚至IE8中工作正常,但在IE9中则不行.

HTML:

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

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;
}

IE9中的"sit amet"非常庞大,因为它似乎会一次又一次地增加字体大小.用"!important"或其他增加特异性的方法覆盖它是不可能的(例如"div.outer"应该已经这样做了).它甚至似乎在相同的声明中div.outer p:after, div p.inner:after成倍增加,即不会乘以3,而是乘以9!

(请注意,这里不需要"内部"和"外部"类.通过div p {}一次又一次地声明也会发生同样的情况.但只有将类作为一个真实世界的例子才有意义.)

这是一个测试页面:http://dl.dropbox.com/u/4667354/temp/ie9-bug.html

有什么解决方案吗？

编辑:

澄清两个误解:

1. 该错误不是通常的行为,即子元素在em使用时会乘以其父级的字体大小.缺点是生成的内容中的字体大小不能被覆盖,并且在尝试时无论如何都会成倍增加.即设置字体大小div p:after一次有效,但再次设置它会倍增而不是覆盖它.
2. 为了更好地了解问题所在(如果您手头没有IE9),这里有两个测试页面截图:在IE8和任何其他现代浏览器和IE9中.

Answer 1

你可以尝试使用rem替代em,IE9支持的话,那么你的尺寸会那么相对于基本字体大小,而不是乘在一起. 这是一个很好的解释.

我猜这里的区别在于IE9将生成的内容视为子元素,而其他浏览器则不是,因此是乘法.