我在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; }
“sit amet”在IE9中是巨大的,因为它似乎一次又一次地增加了字体大小.不可能用“!important”或其他提高特异性的手段(例如“div.outer”应该已经这样做)来覆盖它.甚至似乎它在相同的声明中被倍增,即div.outer p:之后,div p.inner:之后不会乘以3,而是乘以9!
(请注意,这里不需要“内部”和“外部”类,同样的情况是通过一次又一次地声明div p {},但它只适用于类作为一个现实世界的例子.
这是一个测试页:http://dl.dropbox.com/u/4667354/temp/ie9-bug.html
有什么解决方案吗?
编辑:
澄清两个误会:
>该bug不是通常的行为,子元素在使用em时乘以其父代的字体大小.错误是,生成的内容中的字体大小不能被覆盖,并且在尝试时将会倍增.即在div p中设置font-size:一旦工作,但再次设置它倍增而不是覆盖它.
>为了更好地看看问题是什么(如果你手边没有IE9),这里是测试页面的两个屏幕截图:in IE8 and any other modern browser和in IE9.
解决方法
您可以尝试使用rem而不是em,IE9 supports it,然后您的大小将相对于基本字体大小而不是相乘.
Here’s a good explanation.