Internet Explorer 9 の最新版でも改善されない致命的なHelveticaバグ


投稿日:2012年11月14日
  • 39
  • 0



IE9でページが表示されないという致命的なバグ

ごく一般的な条件で発生して、簡単に対応できるので、Webデザイナーやコーダーの方に伝えてあげてください。

私はとある環境のテスト中に発生したので、設定ミスだと思い数時間無駄にしました…。


バグの症状

具体的には
1.「Type1のHelvetica」をインストールしているPC。
2.「css」で「body」にたいして「font-family」で「Helvetica」を先頭に指定。

こんなありふれた環境で画面が真っ白(灰色?)になります。

以下の画像のように「example.com の表示中に問題が発生したため、Internet Explorer は互換表示を使用して Web ページを更新しました。」というメッセージと共に真っ白な画面が表示されます。

以下のWebサイトでバグを体験できます。IE9でアクセスしてみてください。
バグ発生条件を再現してくれているサイト


バグ発生条件

以下のようにhelveticaを先頭に指定すると発生します。

body {
	font-family:helvetica,arial,sans-serif;
}

 

また、WordPressのデフォルトテーマ「twentyeleven」でも発生します。「style.css」334行目あたりにある「Helvetica Neue」でも同じように発生するようです。

body, input, textarea {
	color: #373737;
	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: 1.625;
}

バグの対応策

helvetica」や「Helvetica Neue」より先に、別のフォントを指定する。

body {
	font-family:arial,helvetica,sans-serif;
}

IEの表示に関するバグの多さは有名ですが、全く表示されないとなると困りものです。しかもフォントファミリーにHelveticaを指定するのは、ごく一般的な指定なので困る人も多いと思います。少しでも早く対応してもらいたいものです。


現在のページを共有する



現在のページに関連する記事

Internet Explorer 9 の最新版でも改善されない致命的なHelveticaバグ Web Fontの使い方とGoogle Fontsのオススメフォント 10選
Internet Explorer 8で10pxのフォントが崩れる Internet Explorer 8で10pxのフォントが崩れる
Internet Explorer 9 の最新版でも改善されない致命的なHelveticaバグ Google Fontsの日本語フォント「Noto Fonts」の使い方
Internet Explorer 9 の最新版でも改善されない致命的なHelveticaバグ SyntaxHighlighterでConsolasを使うと日本語が文字化けする際の対処法
Internet Explorer 9 の最新版でも改善されない致命的なHelveticaバグ 人気の画像掲示板「JoyfulNote」でスパム対策を追加
Internet Explorer 9 の最新版でも改善されない致命的なHelveticaバグ 「人気ブログの作り方」もう色で悩まない!人気ブログから学ぶ色彩のテクニック
Internet Explorer 9 の最新版でも改善されない致命的なHelveticaバグ Mac OS X 10.5、10.6、10.7、10.8に標準でインストールされているフォント一覧

おすすめの記事

サーバリソースをリアルタイムに監視するdstatのインストールと使い方

サーバリソースをリアルタイムに監視するdstatのインストールと…

サーバの処理を自動実行するcronの仕組みと応用法

サーバの処理を自動実行するcronの仕組みと応用法

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャッシュの仕組み

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャ…

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザイン…

FuckAdBlockを利用して自由自在にAdblock対策をする方法

FuckAdBlockを利用して自由自在にAdblock対策をする方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカスタムフィールドを作る方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカス…

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデザインに変更

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデ…

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決まり!

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決…


いただいたコメントなど

  1. bluem のコメント:

    IEで表示しようと思ったら突然表示されなくなっていて原因も検討がつかず焦っていたところ、検索でこちらを見つけました。助かりました。ありがとうございます。

    • Oxy のコメント:

      IEのバグの多さはどうにかして欲しいですね。
      個人的にはバグリストとセットでリリースしてほしいくらいですw

  2. 2kakkei のコメント:

    本当に参っていたところ、助かりました!!
    まさかの仕様ですね。
    ありがとうございました!!m(_ _)m

  3. ピンバック: フォントHelveticaで作成されたサイトはInternet Explorerで表示されない!? | helog

bluem へ返信する コメントをキャンセル

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。