css - IE8 CSS @font-face 字体仅适用于 :before content on over and sometimes on refresh/hard refresh

Question

更新:我已经写了一篇博文，介绍我对这个问题的了解。我仍然不完全理解它，但希望有人会阅读这篇文章并阐明我的问题:http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8

我有一个页面，我在其中使用@font-face 为图标导入自定义字体。这些图标是用一个类创建的:

.icon {font-family: 'icon-font';}
.icon:before {content: 'A';}

瞧，我有用于“A”的任何图标。非常标准的东西，适用于所有浏览器，包括 IE8。

但是，在 IE8 中，我有一个奇怪的错误。页面加载时，字体不起作用。我到处都是字母，而不是图标。一旦我将鼠标悬停在页面(正文)上，一半的字母就会变成图标。当我将鼠标悬停在它们上面时，其余的变成图标。

所以字体嵌入正确。 font-family 和 content 属性都有效，但其他原因导致图标仅在悬停后加载。

因此，当您尝试将字体与 :before{content: 'a'} 一起使用时，IE8 中的@font-face 存在某种错误，但我不知道错误是什么。

我在这里搜索了几个小时以寻找类似的错误/IE8 问题/任何问题，但我没有运气，我快要发疯了。有什么建议么？

如果我能提供更多可能有用的信息，请告诉我。

编辑:更新了博客文章的损坏链接。

Answer 1

我有同样的错误。

我通过在 domready 上执行这个脚本来修复它(当然只适用于 IE8):

var head = document.getElementsByTagName('head')[0],
    style = document.createElement('style');
style.type = 'text/css';
style.styleSheet.cssText = ':before,:after{content:none !important';
head.appendChild(style);
setTimeout(function(){
    head.removeChild(style);
}, 0);

这让 IE8 重绘所有 :before 和 :after 伪元素