IE8 CSS @ font-face字体只能用于：内容覆盖之前，有时用于刷新/硬刷新
更新：我写了一篇关于这个问题的博客文章。 我仍然不完全了解它，但希望有人会阅读这个问题，并在我的问题上说一些： http : //andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8
我有一个页面，我正在使用@ font-face导入图标的自定义字体。 图标是用一个类创build的：
.icon {font-family: 'icon-font';} .icon:before {content: 'A';} 瞧，我有什么图标用于“A”。 相当标准的东西，适用于所有的浏览器，包括IE8。
但是，在IE8中，我有一个奇怪的错误。 页面加载时，字体不起作用。 我没有图标，而是到处都有信件。 一旦我将鼠标hover在页面（正文）上，一半的字母就会变成图标。 其余的人在我盘旋时变成了图标。
所以字体正确embedded。 font-family和content属性都可以正常工作，但其他的东西只会导致图标只能在hover后加载。
所以当你尝试使用字体：before {content：'a'}时，在IE8中会出现一些类似于@ font-face的错误，但我不知道这个错误是什么。
我在这里search了几个小时，发现类似的bug / IE8问题，但是我没有运气，而且我要疯了。 有什么build议么？
让我知道，如果我可以提供更多的信息，可能会有所帮助。
编辑：更新到博客post的断开的链接。
我有同样的错误。
我通过在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伪元素
我最近遇到了这个问题，并通过在我的CSS文件中包含@ font-face两次来修复它。 第一个@ font-face被IE使用，第二个被其他浏览器使用。
@font-face { font-family: "SocialFoundicons"; src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot"); font-weight: normal; font-style: normal; } @font-face { font-family: "SocialFoundicons"; src: url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot"), url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.eot?#iefix") format("embedded-opentype"), url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.woff") format("woff"), url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.ttf") format("truetype"), url("//www.tintup.com/public/css/foundation_icons_social/social_foundicons.svg#SocialFoundicons") format("svg"); font-weight: normal; font-style: normal; }
资料来源： http : //www.boonex.com/n/ie8-icon-font-fix-and-unused-language-keys-2012-08-20
我正在试验完全相同的问题。 在IE8中，webfont图标（使用伪元素）有时呈现备用字体，但是当您将其hover时，webfont图标可见。
这些图标是在IE7支持之后使用：after和之前的， 就像这样 。
就我而言，该项目是在HTML5中开发的，并使用htmlshiv支持旧版浏览器中的新HTML5标签。
这个问题是可笑的解决将html5shiv脚本标记放置在主CSS：
<link rel="stylesheet" href="/stylesheets/main.css" type="text/css"> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
我现在很高兴:)我希望有所帮助！
我有一个类似的问题，直到我hover在父元素上，字体才显示出来。 我能够通过在父元素上触发一个焦点事件来解决这个问题。
element.parent（）触发（ '焦点'）;
希望这可以帮助别人！
解决方法：
查找样式表并重新加载文档就绪，如果IE8：
示例HTML：
<!DOCTYPE html> <html> <head> <!-- … --> <link id="base-css" rel="stylesheet" href="/styles.base.css" type="text/css" /> <!-- … --> </head> <!-- … --> </html>
示例JavaScript：
// Reload stylesheet on document ready if IE8 if ($.browser.msie && 8 == parseInt($.browser.version)) { $(function() { var $ss = $('#base-css'); $ss[0].href = $ss[0].href; }); }
上述解决scheme并没有解决我的问题，当IE8刷新。 另外我发现一些问题，添加样式表会破坏IE8背景大小修复backgroundsize.min.htc
所以这就是我所做的：
添加ie8类到html标签：
<!--[if IE 8 ]><html class="ie8"><![endif]-->
将加载类添加到正文中：
<body class='loading'>
仅覆盖IE8的CSS内容属性：
<style> .ie8 .loading .icon:before { content: '' !important; } </style>
现在去掉DOM准备好的加载类：
$( function() { $('body').removeClass('loading') } );
现在它工作！
根据@ausi的回答，您可以使用jQuery和CoffeeScript将其重构为4行：
$(document).ready -> $style = $('<style type="text/css">:before,:after{content:none !important}</style>') $('head').append $style setTimeout (-> $style.remove()), 0
或使用JavaScript语法：
$(document).ready(function() { var $style; $style = $('<style type="text/css">:before,:after{content:none !important}</style>'); $('head').append($style); return setTimeout((function() { return $style.remove(); }), 0); });
我在Chrome中遇到类似的问题。 这是我的修复：
setTimeout(function(){ jQuery('head').append('<style id="fontfix">*:before,*:after{}</style>'); },100);
我的猜测是，伪css样式是在webfont准备好之前呈现的，导致了空白的字形。 加载页面后，以任何方式hover或更改CSS导致他们奇迹般地出现。 所以我的修复只是迫使一个CSS更新什么都不做。
对于我来说，这个问题是简单地用内容属性声明来解决的。
即：
.icon:before { content: "\f108" !important; }
好的，所以我一直在试图解决这个问题。 奇怪的是，icomoon演示在IE8中一直工作，但我从来没有这样做，即使我觉得我有几乎相同的东西。 所以我开始把所有东西都烧掉（icomoon演示以及我自己的实现）以及我发现需要在这里工作的两件事情。
首先，我发现我需要保留文件名上的caching。
所以在我的实现中，我有：
@font-face { font-family: 'iconFont'; src:url('icon_font.eot'); src:url('icon_font.eot') format('embedded-opentype'), url('icon_font.woff') format('woff'), url('icon_font.ttf') format('truetype'), url('icon_font.svg') format('svg'); font-weight: normal; font-style: normal; }
但是我需要的是：
@font-face { font-family: 'iconFont'; src:url('icon_font.eot?-v9zs5u'); src:url('icon_font.eot?#iefix-v9zs5u') format('embedded-opentype'), url('icon_font.woff?-v9zs5u') format('woff'), url('icon_font.ttf?-v9zs5u') format('truetype'), url('icon_font.svg?-v9zs5u#icomoon') format('svg'); font-weight: normal; font-style: normal; }
其次，这个没有意义，是我需要样式表中有一个:hover伪select器的东西。 不pipe它在哪里，它的规则是什么，它只是需要一些东西，然后当我徘徊时，图标就会出现。
所以我简单地将[data-icon]:hover{}插入到我的CSS样式表中（就像那样，没有任何规则）。
我希望我可以向你解释为什么这个工作，但我不明白。 我最好的猜测是，这触发了一些在IE8的刷新，并导致图标显示。
我的IE8问题是通过去除伪元素select器中的双冒号解决的。
在IE8中不显示图标…
.icon::before { content: "\76"; }
在IE8中显示图标…
.icon:before { content: "\76"; }
好的，这是@ ausi解决scheme的一个变种，我已经使用了这个解决scheme。 这个解决scheme来自亚当的评论在这篇文章的底部http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8/
我想我会把它放在更详细的地方，让别人更快地使用它。
设置一个额外的类，例如。 ie-loading-fix在IE8的html标签上。 包括所有的CSS，然后有一个IE8的条件JS文件。 例如：
<!DOCTYPE html> <!--[if IE 8]> <html class="ie-loading-fix"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]--> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Include all your CSS before JS --> <link rel="stylesheet" type="text/css" href="css/main.css"> <!--[if lt IE 9]> <script src="js/ie.js"></script> <![endif]--> </head> ...
然后在主CSS文件的顶部包含如下内容：
.ie-loading-fix :before, .ie-loading-fix :after { content: none !important; }
然后在你的IE8的js/ie.js文件中包含以下内容：
window.onload = function () { var cname = document.documentElement.className; cname = cname.replace('ie-loading-fix', ''); document.documentElement.className = cname; }
这JS将删除ie-loading-fix样式，这是隐藏所有:before和:after内容，并将强制IE8重新绘制所有:before和:after内容一旦加载页面。
这个解决scheme解决了我使用Font Awesome v4.4时遇到的一个问题，即使我明确地设置了使用元标记在边缘模式下加载的页面，它经常会将IE8切换到兼容性视图或崩溃。
如果我没有错，那么IE不读取TTF字体，它需要EOT字体
我根据@vieron的回答做了一些研究，结果发现解决这个问题的另一种方法是阻止页面渲染几毫秒，这样字体可以在内容之前加载。 虽然阻塞页面渲染不是最聪明的方法来解决这个问题，因为你不知道你应该阻止多less毫秒。
我通过把php文件作为javascript的源文件来certificate它。
<!--[if lt IE 9]> <script src="/block.php"></script> <![endif]-->
block.php
<?php usleep(200000); ?>
如果您有任何外部JavaScript库（如HTML5shiv），则会自动进行此操作，除非您正在本地networking（Intranet或本地主机）上运行站点，延迟非常低，并且在内容之前没有脚本。
这就解释了这个问题并没有被人们广泛的关注。
我真的很努力地find一个优雅的解决scheme，但我找不到排除javascript或阻止IE浏览器的页面渲染的东西。
这是修复，我们在使用ajax时遇到了这个问题，IE7，IE8和IE9
setInterval(function(){ var $ss = $('#base-css'); $ss[0].href = $ss[0].href; },300);
