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”是 large ，因为它似乎一次又一次地增加了字体大小。用“！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将生成的内容视为子元素，而其他浏览器则不是，因此是乘法。

Answer 2

可能与从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
    - 文字 - 空文字节点
  - 文字 - 空文字节点

奖金阅读

Interoperable HTML Parsing in IE9

Answer 3

有一种变通方法允许字体大小相对（em或%）：添加另一个类，其中伪元素font-size减小了大小。

我已将fiddle showing the workaround放在一起，但基本代码如下：

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

大多数浏览器会使用.one-ie::before覆盖.two::before选择器，而IE的复合将基本上否定之前的font-size。如果IE修复了bug并允许伪元素样式覆盖而不是复合，那么hack会像其他浏览器一样被覆盖。

Answer 4

我在Firefox 4.0.1中看到测试页面“很棒”。你确定这只是IE而不是实际的规范行为吗？

编辑：和野生动物园。我在Mac上。我认为这不是IE漏洞。

Answer 5

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

HTML {
    font-size: 100%;
}

应该修复它！

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

5 个答案:

奖金阅读