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