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

有什么解决办法吗？

编辑:

为了澄清两个误解:

该错误是而不是，这是通常的行为，即使用em时，子元素会乘以其父元素的字体大小。错误是生成的内容中的字体大小不能覆盖，并且在尝试时仍会相乘。即在div p:after中设置字体大小一次可以，但是再次设置它会倍增而不是覆盖。

为了更好地了解问题所在(如果您手头没有IE9)，下面是测试页的两个屏幕截图:in IE8 and any other modern browser和in IE9。

Answer 1

您可以尝试使用rem而不是em和IE9 supports it，然后您的大小将相对于基本字体大小而不是相乘。 Here's a good explanation。

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