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 提到的页面，但该页面还显示 Microsoft 不承认这是一个错误(他们说他们无法重现它)。可以使用以下简单文档在 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 伪元素。