web-dev-qa-db-ja.com

IE8 CSS @ font-faceフォントは、コンテンツの前、および場合によっては更新/ハード更新でのみ機能します

更新：この問題について学んだことに関するブログ記事を書きました。私はまだ完全には理解していませんが、誰かがこれを読んで、私の問題にいくつかの光を当てることを願っています： 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では、奇妙なバグがあります。ページがロードされるとき、フォントは機能していません。アイコンの代わりに、あちこちに手紙があります。ページ（本文）にカーソルを合わせると、文字の半分がアイコンになります。私がそれらの上にカーソルを合わせると、残りはアイコンになります。

そのため、フォントフェースは適切に埋め込まれています。フォントファミリとコンテンツのプロパティは両方とも機能していますが、ホバー後にのみアイコンが読み込まれる原因が他にあります。

したがって、IEの@ font-faceには、：before {content： 'a'}でフォントを使用しようとすると何らかのバグがありますが、バグが何なのかわかりません。

私は同様のバグ/ IE8問題/何でもここで何時間も検索しましたが、私は運がなく、夢中になります。助言がありますか？

役立つ情報を提供できるかどうかを教えてください。

編集：ブログ投稿への壊れたリンクを更新しました。

cssinternet-explorer-8font-face
57
Andy

同じバグがありました。

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擬似要素

71
ausi

最近これにも遭遇し、CSSファイルに@ font-faceを2回含めることで修正しました。最初の@ font-faceはIEによって使用され、2番目は他のブラウザによって使用されます。

@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-2

22
Ryo C.

私はまったく同じ問題を実験していました。 IE8では、Webフォントアイコン（擬似要素を使用）がフォールバックフォントをレンダリングすることがありますが、ホバーするとWebフォントアイコンが表示されます。

アイコンは、IE7のサポートで--afterと：beforeを使用して実装されました like this 。

私の場合、プロジェクトは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]-->

今はうれしいです:)

18
vieron

親要素にカーソルを合わせるまでフォントが表示されないという同様の問題がありました。要素の親でフォーカスイベントをトリガーすることで、この問題を修正できました。

element.parent（）。trigger（ 'focus'）;

これが誰かを助けることを願っています！

5
Lakota Lefler

回避策：

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;
    });
}
4
lemats

上記の解決策は、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')
} );

動作するようになりました！

4
Matt Bindoff

@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);
});
2
rpearce

私にとって、この問題は!importantコンテンツ属性。

つまり：

.icon:before {
   content: "\f108" !important;
}
1
user3845138

Chromeでも同様の不具合がありました。ここに私の修正があります：

setTimeout(function(){
    jQuery('head').append('<style id="fontfix">*:before,*:after{}</style>');
    },100);

私の推測では、WebCSの準備が整う前に疑似CSSスタイルがレンダリングされたため、空白のグリフが作成されていました。ページがロードされた後、CSSをホバーまたは変更すると、それらが魔法のように表示されます。したがって、私の修正では、CSSの更新を強制しますが、何も実行されません。

1
MrMattSim

IE8の問題は、疑似要素セレクターの二重コロンを削除することで解決しました。

しない IE8でアイコンを表示...

.icon::before {
    content: "\76";
}

Does IE8でアイコンを表示...

.icon:before {
    content: "\76";
}
0
Alistair Chisholm

わかりましたので、ここで私が使用した@ausiのソリューションのバリエーションがあります。この解決策は、この記事の最後にあるAdamのコメントに基づいています http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8/

他の人が使用しやすくするために、ここで詳しく説明すると思いました。

追加のクラスを設定します。 IE8のhtmlタグのie-loading-fix。すべての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コンテンツを再描画させますロードされました。

このソリューションは、メタタグを使用してEdgeモードでロードするように明示的にページを設定していても、IE8を互換表示に頻繁に切り替えたりクラッシュしたりするFont Awesome v4.4の問題を修正しました。

0
Simon Watson

さて、私はしばらくの間、この問題を修正しようとしてきました。奇妙なことに、icomoonデモはIE8で機能し続けましたが、私はほとんど同じことをしているように感じましたが、私は決してしませんでした。だから、すべてを煮詰め始めました（icomoonデモと自分の実装）、そしてこれが機能するために必要な2つのことを見つけました。

最初に、ファイル名にキャッシュ無効化を維持する必要があることがわかりました。

だから私の実装では：

@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擬似セレクター。それが何をしているのか、そのルールが何であるのかは関係ありません。何かが必要なだけで、アイコンの上にカーソルを合わせるとアイコンが表示されます。

だから私は単に[data-icon]:hover{}をCSSスタイルシートに追加します（ルールなしで、そのようにします）。

これがなぜ機能するのかを説明したいと思いますが、わかりません。私の推測では、これによりIE8で何らかの更新がトリガーされ、アイコンが表示されます。

0
Hanna