Internet explorer IE7中的字体系列CSS3

Internet explorer IE7中的字体系列CSS3,internet-explorer,css,fonts,internet-explorer-7,font-face,Internet Explorer,Css,Fonts,Internet Explorer 7,Font Face,由于某些原因,我的网站导致IE以“文档模式IE7”呈现。 我已经用字体版本替换了页面上的精灵和图像图标。 不幸的是,字体面css在此浏览器中不起作用。 当我在IE的开发者工具中将“文档模式”切换到IE8或IE9时,图标会按预期显示 我不明白为什么IE7不显示图标。据我所知,它应该可以使用这种字体 正如您在代码中看到的,我使用了fontello.com中的字体文件和css定义 以下是我用来显示图标的样式表: <style type="text/css"> @font-face { f

由于某些原因,我的网站导致IE以“文档模式IE7”呈现。 我已经用字体版本替换了页面上的精灵和图像图标。 不幸的是,字体面css在此浏览器中不起作用。 当我在IE的开发者工具中将“文档模式”切换到IE8或IE9时,图标会按预期显示

我不明白为什么IE7不显示图标。据我所知,它应该可以使用这种字体

正如您在代码中看到的,我使用了fontello.com中的字体文件和css定义

以下是我用来显示图标的样式表:

<style type="text/css">
@font-face {
 font-family: 'fontello-postbit';
 src:url(/includes/fonts/fontello-postbit.eot);
 src:url(/includes/fonts/fontello-postbit.eot?#iefix) format('embedded-opentype'),
 url(/includes/fonts/fontello-postbit.woff) format('woff'),
 url(/includes/fonts/fontello-postbit.ttf) format('truetype'),
 url(/includes/fonts/fontello-postbit.svg#fontello-postbit) format('svg');
 font-weight:normal;
 font-style:normal;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: 'fontello-postbit';
  font-style:normal;
  font-weight:normal;
  font-size: 120%;
  display:inline-block;
  text-decoration:none;
  width:1em;
  margin-right:0.2em;
  text-align:center;
  opacity:0.8;
/* fix buttons height, for twitter bootstrap */
  line-height: 1em;
/* Animation center compensation - magrins should be symmetric */
/* remove if not needed */
  margin-right: 0.2em;
  speak: none;
}
.icon-star:before { content: '\2605'; } /* '?' */
.icon-star-empty:before { content: '\2606'; } /* '?' */
.icon-flag:before { content: '\2691'; } /* '?' */
.icon-attention:before { content: '\26a0'; } /* '?' */
/* ... etc ...*/
.icon-user:before { content: '\1f464'; } /* '\1f464' */
</style>

@字体{
字体系列:“fontello postbit”;
src:url(/includes/fonts/fontello postbit.eot);
src:url(/includes/fonts/fontello postbit.eot?#iefix)格式('embedded-opentype'),
url(/includes/fonts/fontello postbit.woff)格式('woff'),
url(/includes/fonts/fontello postbit.ttf)格式(“truetype”),
url(/includes/fonts/fontello postbit.svg#fontello postbit)格式('svg');
字体大小:正常;
字体风格:普通;
}
[class^=“icon-”]:在,
[类别*=“图标-”]:之前{
字体系列:“fontello postbit”;
字体风格:普通;
字体大小:正常;
字体大小:120%;
显示:内联块;
文字装饰:无;
宽度:1米;
右边距:0.2米;
文本对齐:居中;
不透明度:0.8;
/*固定按钮高度,用于twitter引导*/
线高:1米;
/*动画中心补偿-magrins应该是对称的*/
/*如果不需要,请移除*/
右边距:0.2米;
说:没有;
}
.icon star:在{content:'\2605';}/*'?'之前*/
.icon星形空:在{content:'\2606';}/*'?'之前*/
.icon标志:{content:'\2691';}/*'?'之前*/
.icon注意:{content:'\26a0';}/*'?'之前*/
/* ... 等等*/
.icon用户:{content:'\1f464';}/*'\1f464'之前*/

编辑:Duh-我刚刚注意到fontello为IE7本身提供了css解决方案。

可能是因为IE7无法识别
:before
:before
伪元素

如果关键的话,您可以尝试以下几种解决方案:

或者你可以忽略IE7