更新: この問題に関して私が学んだことをブログ記事に書きました。まだ完全には理解できていませんが、誰かがこれを読んで私の問題に何らかのヒントを与えてくれることを願っています。http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8
@font-face を使用してアイコン用のカスタム フォントをインポートしているページがあります。アイコンはクラスを使用して作成されます。
.icon {font-family: 'icon-font';}
.icon:before {content: 'A';}
すると、「A」に使用されるアイコンができました。かなり標準的なもので、IE8 を含むすべてのブラウザーで動作します。
しかし、IE8 では奇妙なバグがあります。ページが読み込まれると、フォントが機能しません。アイコンの代わりに、文字があちこちに表示されます。ページ (本文) の上にマウスを移動すると、文字の半分がアイコンになります。残りの文字も、マウスを移動するとアイコンになります。
つまり、font-face は適切に埋め込まれています。font-family と content プロパティは両方とも機能していますが、他の何かが原因で、アイコンはホバー後にのみ読み込まれます。
つまり、IE8 で :before{content: 'a'} でフォントを使用しようとすると、@font-face に何らかのバグが発生しますが、そのバグが何なのかはわかりません。
ここで同様のバグ/IE8 の問題/その他を何時間も検索しましたが、運が悪く、気が狂いそうです。何か提案はありますか?
他に役に立つ情報があればお知らせください。
編集: ブログ投稿への壊れたリンクを更新しました。
ベストアンサー1
私も同じバグに遭遇しました。
私は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疑似要素を再描画できるようになります。