約10年前

IE11でHTML5デザインが崩れる現象を対策する「x-ua-compatible」

HTML5でコーディングしたサイトをIE11で確認してみたら、デザインがグチャグチャになっていたという現象が相次いでいるようです。

・他の人と同じIE11を使っているのに自分だけ表示が崩れてしまう
・エラーが一つも見つからない

上記のような”エラーでないエラー”に悩まされているWEB制作者の方、「x-ua-compatible」の確認はお済みでしょうか?

x-ua-compatibleで一発解決!

headタグ内に以下の1行を追加してください。


これはIE10表示モードでページを表示させる機能を持ちます。IE10以外のバージョンも指定することができますので、以下にその一覧を掲載します。

対応している最新バージョンの表示モードに変更する。

表示モードを「IE 11」に変更する。

表示モードを「IE 10」に変更する。

表示モードを「IE 9」に変更する。

表示モードを「IE 8」に変更する。

表示モードを「IE 7」に変更する。

表示モードをQuirksモード(IE5)に変更する。

表示モードをQuirksモード(IE5)に変更する。

複数の表示モードを指定する。その中で対応している最も新しいバージョンを適用する。

DOCTYPE宣言が無いまたはHTML3以前の場合はQuirksモード(IE5)、HTML4以降の宣言であればIE7の表示モードに変更する。

DOCTYPE宣言が無いまたはHTML3以前の場合はQuirksモード(IE5)、HTML4以降の宣言であればIE8の表示モードに変更する。

IEのプラグイン「Google Chrome Frame」を導入している場合はChromeの表示モードに変更する。


なぜデザイン崩れが発生したのか

IE11のブラウザ設定で表示モードを何らかの操作によって、意図せずIE8やIE7に変更してしまっていたからだと思われます。過去のIEの表示モードを確認できるようになったことはWEB制作者にとっては嬉しい限りですが、一方で意図せず表示モードを変更してしまったユーザーにとっては迷惑でしかありません。ですので必ずWEB制作者はHTML側で「x-ua-compatible」を設定し、ユーザーの表示モードを統一するようにしましょう。IE11の出現によって、WEB制作者のチェック項目がまた一つ増えることとなりました。

執筆者

AnTytle

オススメ