普段と違うPCで作業していまして、IEでホームページをチェックしてみると画面が真っ白で表示されない!?

緊急事態発生！

別PCのIE11では問題無く表示されるので、

meta要素のドキュメント互換モードの指定に原因があるのかと、いろいろ試してみましたがダメ。

表示はされるが、「表示中に問題が発生したため、Internet Explorerは互換表示を使用してwebページを更新しました。」というメッセージが出て、レイアウトが崩れたページがフリーズしてしまう状況。

すっかり予定が狂ってしまいましたが、最終的に原因が分かりました。

なんと、フォントのHelveticaが影響してバグを起こしていました。

バグの発生条件

・使用しているPCにHelvetica（Helvetica Neue）がインストールされている。
・bodyのfont-family指定で、最初にHelvetica（Helvetica Neue）が記述されている。

通常はbodyのfont-family指定にHelvetica（Helvetica Neue）を使用していませんが、bootstrapを利用していたので影響がでました。

bootstrapで「_scaffolding.scss」を確認すると

body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $text-color;
  background-color: $body-bg;
}

続いて、「_variables.scss」を確認すると

$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base:        $font-family-sans-serif !default;

いましたね。

$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;

このフォント指定で先頭に記述されている”Helvetica Neue”より前にArialを持ってきます。

$font-family-sans-serif:  Arial, "Helvetica Neue", Helvetica, sans-serif !default;

これでIE9,IE10で発生するバグが解消されました。

さすがIEです。このバグはネットに存在が出ているのにIEは今後も放置するのでしょうか？