Question

由于某种原因，我的网站导致IE以“文档模式IE7”呈现。我已经用字体版本替换了页面上的精灵和图像图标。不幸的是，font-face 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>

编辑：Duh - 我刚刚注意到fontello为IE7提供了一个css解决方法。

Answer 1

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

您可以尝试其中一些解决方案，如果它的关键： after-and-before-css-pseudo-elements-hack-for-ie-7

或者你可以忽视IE7。

IE7中的字体CSS3

1 个答案: