Helveticaが原因となるIE9,IE10のバグ

2014年05月16日
follow us in feedly

IE9V2

普段と違う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は今後も放置するのでしょうか?

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ