更新：我写了一篇博客文章，介绍我对这个问题的了解。我仍然不完全理解它，但希望有人能读到这篇文章并阐明我的问题：http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8 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 问题/任何东西，但我没有运气，我快要发疯了。有什么建议么？
如果我可以提供更多可能有帮助的信息，请告诉我。
编辑：更新了博客文章的损坏链接。
我有同样的错误。
我通过在 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 and :after伪元素
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
