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


投稿日:2012年11月14日
  • 40
  • 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に標準でインストールされているフォント一覧

おすすめの記事

Web制作の自由度をフレームワークレベルまで高めたCorvid by Wix 

Web制作の自由度をフレームワークレベルまで高めたCorvid by Wi…

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

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

SNSのカウントをキャッシュするWordPressのプラグインを作成しました

SNSのカウントをキャッシュするWordPressのプラグインを作成し…

エンティティとデコード用プラグイン「Entity Decode Button」を作成しました

エンティティとデコード用プラグイン「Entity Decode Button」…

公式ドキュメントよりも詳しいTinyMCEの使い方(基本編)

公式ドキュメントよりも詳しいTinyMCEの使い方(基本編)

サーバで管理していたWordPressをローカル環境に移行する方法

サーバで管理していたWordPressをローカル環境に移行する方法

知らなきゃ損!WordPressの表(テーブル)はExcelで作ろう!

知らなきゃ損!WordPressの表(テーブル)はExcelで作ろう!

Linuxでサーバを構築するに当たって必要になる基礎知識

Linuxでサーバを構築するに当たって必要になる基礎知識

WordPressに「トップへ戻る」ボタンを設置して、フックの仕組みについて学ぼう

WordPressに「トップへ戻る」ボタンを設置して、フックの仕組み…


いただいたコメントなど

  1. bluem のコメント:

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

    • Oxy のコメント:

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

  2. 2kakkei のコメント:

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

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

コメントを残す

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

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