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に標準でインストールされているフォント一覧

おすすめの記事

Apacheのmod_rewriteモジュールの使い方を徹底的に解説

Apacheのmod_rewriteモジュールの使い方を徹底的に解説

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスターの使い方

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスター…

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

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

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

ImageMagickをWindowsのXAMPPに導入する方法

ImageMagickをWindowsのXAMPPに導入する方法

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を作成しました

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を…

作業効率を飛躍的に向上させる!実務で使うIllustratorのショートカット一覧

作業効率を飛躍的に向上させる!実務で使うIllustratorのショー…

DNS Amp攻撃の解説と、踏み台にされないためのBIND DNSの設定

DNS Amp攻撃の解説と、踏み台にされないためのBIND DNSの設定


いただいたコメントなど

  1. bluem のコメント:

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

    • Oxy のコメント:

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

  2. 2kakkei のコメント:

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

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

コメントを残す

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

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