IE9 bug增加css内容的字体大小 [英] IE9 bug with increased font-size of css content

问题描述

我在IE9中发现了一个错误，但是却没有帮助找到任何解决方案。下面的工作在FF 3 + 4，Chrome， Opera

 <$ c $ 
 c>< 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：{
 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 不会乘（请注意，inner和outer类在这里不是必须的，通过声明

这里是一个测试网页： http://dl.dropbox.com/u/4667354/temp /ie9-bug.html

有没有解决方案？

为了澄清两个误解：

1. strong> not 当使用 em 时子元素乘以其父元素的字体大小的通常行为。错误是生成的内容中的字体大小无法覆盖，并且尝试时会倍增。也就是说在 div p：之后设置字体大小一次，但将其设置为重复，而不是覆盖它。


2. 为了更好地了解问题是什么（如果你没有IE9），下面是测试页面的两个截图： 和在IE9 中。




解决方案

您可以尝试使用 rem ，而不是 em ， IE9支持它，那么你的大小将相对于基本字体大小而不是一起倍增。 这是一个很好的解释。

我猜这里的区别是，IE9将生成的内容作为子元素处理，而其他浏览器不处理，因此是乘法。

I have found a bug in IE9 but googling for it hasn't helped finding any solution yet.

The following works fine in FF 3 + 4, Chrome, Opera and even IE8, but not in IE9.

The HTML:

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

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

The "sit amet" is huge in IE9, as it seems to multiply the font-size again and again. It's not possible to overwrite it with "!important" or other means of increasing the specificity (as e.g. the "div.outer" should already do it). It even seems that it gets multiplied within the same declaration, i.e. div.outer p:after, div p.inner:after won't multiply by 3, but by 9!

(Please note that the "inner" and "outer" classes are not necessary here. The same happens by declaring div p {} again and again. But it makes only sense with classes as a real-world example.)

Here is a test page: http://dl.dropbox.com/u/4667354/temp/ie9-bug.html

Is there any solution?

Edit:

To clarify two misunderstandings:

1. The bug is not the usual behaviour that child elements multiply the font-size of its parent when em are used. The bug is that font-sizes in generated content cannot be overwritten and will multiply anyway when trying to. I.e. setting the font-size in div p:after once works, but setting it again multiplies instead of overwrites it.
2. To better see what the problem is (in case you don't have IE9 at hand), here are two screenshots of the test page: in IE8 and any other modern browser and in IE9.

解决方案

You could try using rem instead of em, IE9 supports it, then your sizes will then be relative to the base font size instead of multiplying together. Here's a good explanation.

I would guess the difference here is that IE9 is treating the generated content as a child element while the other browsers aren't, hence the multiplication.

这篇关于IE9 bug增加css内容的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！