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

问题描述

|| 我在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！（请注意，这里不必使用\“ inner \”和\“ outer \”类。一次又一次地声明div p {}也会发生同样的情况。但这仅对于类作为真实示例是有意义的。）这是一个测试页：http://dl.dropBox.com/u/4667354/temp/ie9-bug.html 有什么解决办法吗？编辑：为了澄清两个误解：该错误不是通常的行为，即当使用“ 4”时，子元素会乘以其父元素的字体大小。错误是生成的内容中的字体大小不能被覆盖，并且在尝试时仍会相乘。即一次在-5中设置字体大小是可行的，但是再次设置它会倍增而不是覆盖。为了更好地了解问题出在哪里（如果您手头没有IE9），下面是测试页的两个屏幕截图：在IE8和任何其他现代浏览器中以及在IE9中。

解决方法

您可以尝试使用rem而不是em，IE9支持它，然后您的大小将相对于基本字体大小而不是相乘。这是一个很好的解释。我想这里的区别在于IE9将生成的内容视为子元素，而其他浏览器则不这样做，因此是乘法。 , 这可能与从IE8到IE9解析的DOM树之间的差异有关。 Internet Explorer 8： <html> <head> <body> <div class=\"outer\"> <p class=\"inner\"> 文字-Lorem ipsum dolar Internet Explorer 9： <html> <head> <body> 文本-空文本节点 <div class=\"outer\"> 文本-空文本节点 <p class=\"inner\"> 文字-Lorem ipsum dolar 文本-空文本节点文本-空文本节点奖励阅读 IE9中的可互操作HTML解析 , 有一种变通办法，允许字体大小是相对的（em或%）：使用伪元素font-size添加另一个类以减小字体大小。我整理了一个小提琴，显示了解决方法，但基本代码如下：

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

样式如下所示：

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

大多数浏览器会使用.two::before覆盖.one-ie::before选择器，而IE \的复合实际上会否定先前的font-size。如果IE修复了该错误，并允许伪元素样式被覆盖而不是复合，则hack会像其他浏览器一样被覆盖。 , 我在Firefox 4.0.1中看到测试页“ sit amet”很大。您确定这仅是IE，而不是实际的规范行为吗？编辑：和野生动物园了。我在Mac上。我不认为这是IE错误。 , 我在使用ems的其他IE版本中也看到过类似的情况。尝试设定

HTML {
    font-size: 100%;
}

应该修复它！

ie9 内容内容大小大小字体字体错误错误错误