IE の表示が突然崩れる理由： 互換表示モードとは

IE（Internet Explorer）の表示の問題

Web 制作をする者にとっては IE（Internet Explorer）は鬼っ子と言いますか、バージョンアップの度に毎回、それまでとの整合性の無い仕様変更を色々ヤラカシテくれるので頭の痛い存在です。

そんな中でも、以下のような問題に遭遇した時にまずチェックするべき点をご紹介します。

- 昨日までちゃんと見えていたのに今日はレイアウトがガタガタ
- テストサイトで見えるものと、同じファイルをアップロードした本番サイトの表示が違う
- エンドクライアント見せたら、レイアウトがずれていると言われた

このような場合、まずは IE の「互換表示」モードになっていないか確認しましょう。

「互換表示」モードとは？

IE は、上述のようにバージョンによって色々仕様が変更されますので、古いブラウザに対応しているホームページのために「新しいバージョンで採用した技術は使わないで表示する」という設定ができるのです。これが「互換表示」モードです。

この互換表示モードの設定はブラウザで切り替える事ができるため、突然表示が崩れた場合は、この設定を気づかないうちに変更してしまった可能性が高いです。

「互換表示」モードでの表示

「互換表示」モードで表示されているかは、ブラウザの URL バーの部分に表示されます。ページが切れたようなアイコンが青い色付きになっていれば、互換表示モードで表示中です（＝低いバージョンで見た時をシミュレート中）。

図：「専門家プロファイル」サイトを互換表示モードで表示した所

「互換表示」モードの設定方法

互換表示モードの切り替えは、まず、URL バーのアイコンのクリックで ON/OFF できます。

また、サイトごとに表示モードを固定してしまう事も可能です。

なお、この固定の設定の中にある「イントラネットサイトを互換表示で表示する」というオプションにチェックが入ってしまっていると、社内テストサイトと本番サイトの表示がずれてしまうので注意が必要です。この設定は「ツール」メニュー →「互換表示設定」から確認できます。

図：互換表示設定パネル

Web制作者の側で互換表示モードを指定する方法

Web制作者の側で Web サイトの表示モードを指定する事も可能です。この場合は、どのバージョン互換にするかなども細かく指定できます。

通常は doctype 宣言とメタタグ（<meta http-equiv="X-UA-Compatible" ...>）の組み合わせで指定します。詳しくは、Microsoft の技術情報をご参照下さい。

IE8互換モードについて（日本語）
http://blogs.technet.com/b/jpieblog/archive/2009/09/09/3280034.aspx

このページには、IE の互換表示モードについて、その仕組みの説明、設定方法などが日本語で詳しく説明されています。
ただしこの記事は若干古く、IE 8 までの状況しか反映していません。下記の英語ページでは、IE9、IE10 の場合はどうなっているのかといういう説明が含まれています。

Specifying legacy document modes（英語）
http://msdn.microsoft.com/en-us/librar/jj676915%28v=vs.85%29.aspx

蛇足

ところで、IE というのはWeb制作者に取っては無視できない厄介者、ジャイアンみたいな存在なのですが、Microsoft のこの説明の丁寧さは素晴らしいですね。大きな会社であるからというよりは、やはりユーザと関わっていこうという文化があるように思います。