Question

我有一些通过CSS中的伪元素设置的图标，如下所示：

.button a:before { 
  font-size: 1.3em;
  font-family: font-awesome; 
  content: "*";  
}

在其他地方还有其他类似的声明，比如

.button .otherclass a:before { 
  font-size: 1.35em; 
}

这适用于现代网络浏览器，但IE＆gt; = 9复合了所有字体大小，因此生成的图标非常大（就像它的大小的5倍）。我怎样才能防止这种情况发生？

（BTW，问题为is here的实际代码。）

Answer 1

这是IE中的一个错误，正如@Aibrean提到的Microsoft Connect页面上所报道的那样，但该页面还显示微软不承认这是一个错误（他们说他们无法重现它）。它可以在Win 7上的IE 11中使用以下简单文档进行复制：

＆＃13;

<style>
.foo, .bar:before { 
  font-size: 2em;
  content: "X";  
}
.bar:before { 
  font-size: 5em; 
} 
</style>
X<span class=foo>X</span>
<span class=bar>bar</span>

＆＃13;

第二个X应该是普通X的5倍，但它实际上是IE的10倍，因为IE错误地将2em和5em的效果相乘。

似乎解决方法是组织样式表，以便仅为每个元素设置生成内容的字体大小一次。也就是说，没有两个font-size声明适用于相同的:before或:after伪元素。

Answer 2

有一个比使用绝对字体大小更好的解决方案，那就是在：before或：after声明中使用rem。

em和rem单位基于默认字体大小（通常为16px，因此1rem = 1em = 16px），因此如果用户更改其默认字体，则您的字体也会更改。然而，rem单位不会复合。

rem支持正在增长但你可以同时使用（如果你不需要复合）：

font-size: 2em
font-size: 2rem

然后那些不支持rem的浏览器（例如IE8）将使用em。而且由于IE8没有你所引用的复合问题，这实际上很有效。

如何阻止IE在伪元素中复合相对字体大小？

2 个答案: