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

Question

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

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

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

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

这在现代网络浏览器中工作得很好，但 IE >= 9 混合了所有字体大小，因此生成的图标非常巨大(例如其大小的 5 倍)。我怎样才能防止这种情况发生？

(顺便说一句，有问题的实际代码 is here 。)

Answer 1

这是 IE 中的一个错误，如 Microsoft Connect 中所报告。 @Aibrean 提到的页面，但该页面还显示微软不承认这是一个错误(他们说他们无法重现它)。它可以通过以下简单文档在 Win 7 上的 IE 11 中重现:

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

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

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