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

我在IE9中发现了一个bug，但谷歌搜索它并没有帮助我找到任何解决方案

以下代码在FF3+4、Chrome、Opera甚至IE8中都可以正常工作，但在IE9中却不行

HTML：

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

IE9中的“sit amet”是巨大的，因为它似乎一次又一次地增加字体大小。不可能用“！important”或其他增加特异性的方法覆盖它（例如，“div.outer”应该已经这样做了）。甚至似乎它在同一个声明中得到了相乘，也就是说，

div.outer p:after，div p.inner:after

不会乘以3，而是乘以9

（请注意，“内部”和“外部”类在这里是不必要的。通过反复声明

divp{}

也会发生同样的情况。但这仅在类作为实际示例时才有意义。）

这是一个测试页面：

有什么解决办法吗

编辑：

澄清两个误解：

该bug不是当使用

em

时子元素乘以其父元素字体大小的常见行为。错误在于生成内容中的字体大小不能被覆盖，并且在尝试覆盖时会成倍增加。也就是说，在

div p:after

中设置字体大小一次有效，但是再次设置字体大小会倍增而不是覆盖字体大小

为了更好地了解问题所在（如果你手头没有IE9），这里有两个测试页面的截图：和

---

您可以尝试使用

rem

而不是

em

，然后您的大小将相对于基本字体大小，而不是相乘

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

在Firefox 4.0.1中，我看到测试页面“sit amet”非常大。你确定这只是IE而不是实际的规范行为吗

---

编辑：还有safari。我在Mac电脑上。我不认为这是一个IE bug。

我在使用ems的其他版本的IE中也看到过类似的情况。尝试设置

HTML {
    font-size: 100%;
}

应该修好它

这可能与从IE8到IE9解析的DOM树之间的差异有关

Internet Explorer 8:

• • • • • 文本-Lorem ipsum dolar

Internet Explorer 9:

• • • 文本-空文本节点

    • • 文本-空文本节点

      • • 文本-Lorem ipsum dolar
      • 文本-空文本节点
    • 文本-空文本节点

额外阅读

---

有一种解决方法，允许字体大小是相对的（

em

或

%

）：添加另一个类，使用伪元素

字体大小

减小大小

我已经编写了一个基本代码，但基本代码如下：

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

---

大多数浏览器将使用

.two:：before

覆盖

.one ie:：before

选择器，ie的组合将基本上否定先前的

字体大小。如果IE修复了这个错误，允许伪元素样式覆盖而不是复合，那么黑客行为就会像其他浏览器一样被覆盖。
哇，我还没有听说过
rem
。这肯定能解决问题！：）如果IE9真的将生成的内容视为子元素，这是否意味着它的DOM（至少部分）被（再次）破坏了？@selfthinker可能是这样的-我还没有检查它到底应该如何工作，如果你问的话，你会得到一个明确的答案。请记住：这并不能解决真正的问题，但是一个足够好的解决方法。如果父字体大小应可调整，以便每个子字体自动增长到相同的比例，则此解决方案不起作用。也就是说，每当父字体大小增加或减少时，具有
rem
值的子字体都会保留其（错误的）字体大小。实际上，在IE中，生成的内容从自身继承字体大小，而不是从父元素继承字体大小。这会导致递归字体大小计算，导致结果失控。令人惊讶的是，微软在三个完整的版本（9-11）中都没有解决这个问题。不，“sit amet”应该在任何地方都很重要（即3em），但在IE9中它要大得多（即11.7em！）。请看一下IE9，你会明白我的意思。我只是在问题中添加了两个截图来澄清这一点。不，关键是生成内容中的字体大小不能被覆盖。这就是问题所在。如果你不能覆盖它，字体大小：100%

也帮不上忙。嗯，说得好。但这意味着删除空格可以解决问题，但事实并非如此。当我删除空白时，它看起来像IE8示例（即，中间没有“文本-空文本节点”），错误仍然存在。这种anwsers类型是黑客最喜欢的！做了另一个我觉得更容易理解的JSFIDLE，但那可能就是我：）是的-我应该解释一下，

。一个ie

字体大小是1/
。一个
字体大小
（因此1/1.25=0.8）
<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;
}