0

何らかの理由で、私の Web サイトで 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>

編集：当然-fontelloがIE7自体のcss回避策を提供していることに気付きました。

4

1 に答える 1

1

おそらく疑似要素が IE7 で認識されない:beforeためです。:after

重要な場合は、これらのソリューションのいくつかを試すことができます: after-and-before-css-pseudo-elements-hack-for-ie-7

または、IE7 を無視することもできます。

于 2013-01-29T22:29:11.783 に答える