IE8のレンダリングモードについてまとめてみる

ブラウザ

職場でIE8のレンダリングについて調査しました。
結構複雑だったので、備忘録的にメモ。

IE8のレンダリングモード

・IE8標準モード（IE8標準、完全な標準CSS） ※ デフォルトのレンダリングモード
・IE7互換モード（IE7標準、IE7互換の標準CSS）
・Quirks（クアークス）モード（IE5標準、MS-CSS 5／6／7対応） ※ 互換モード

Quirksモードに切り替わるケース

・Webページ中にDOCTYPE宣言が存在しない。
・HTML3.0以下の文書型を用いている。
・HTML4.0 TransitionalまたはFramesetのDOCTYPE宣言にURLを含まない。

※ DOCTYPE宣言があれば、基本的にIE8標準モードが使われます。
IE7互換モードは、明示的に使うように指定しない限りは使われません。
（例えば［互換表示］ボタンをクリックしたときや、互換モードを設定した場合）

レンダリングモードを指定する方法

・ページのmeta要素で指定する（個別設定）

Webページ単位で描画モードを設定するタグの指定（HTMLコード）

<meta http-equiv="X-UA-Compatible" content="IE=7" />

「IE=」の後の部分を「5」や「8」などにすることによって描画モードを切り替えられます。

互換モード値 レンダリング動作
IE=5 Quirks (クワークス) モード
IE=7 Internet Explorer 7 標準準拠モード
IE=8 Internet Explorer 8 標準準拠モード
IE=edge Internet Explorer 8 と将来のすべての最新のバージョン

複数を指定した場合は最新の標準準拠モードになります。

// (この場合はIE8標準準拠モードになる)
meta http-equiv="X-UA-Compatible" content="IE=5; IE=7; IE=8"

・HTTPレスポンスヘッダで指定する（サイト全体に一括設定）

Webサーバーを使用してサイトにカスタムヘッダーを定義することにより、
Webサイトにドキュメントモードを指定できます。

名前：X-UA-Compatible
値：IE=7

Apache
http://msdn.microsoft.com/ja-jp/library/cc817573.aspx
IIS
http://msdn.microsoft.com/ja-jp/library/cc817572.aspx

互換表示機能について

1 インターネット上の Web サイトは、既定では Internet Explorer 8 標準モードによって描画されます。
  互換表示ボタンを使用して、希望した表示結果が得られなかったサイトの表示結果を修正することが出来ます。

2 Internet Explorer 8 は、互換表示を設定したサイトを記録するので、
  一度ボタンを押せば、次回以降はそのサイトをリストから除外しない限り、常に互換表示機能を用いて描画されます。

3 イントラネットの Web サイトは既定では Internet Explorer 7 標準モードを用いて描画されます。

互換表示ボタンについて

互換表示ボタンが表示されない場合

・Quirksモードのページ
・イントラネット内のサイト(イントラネット内のサイトは Internet Explorer 7 互換モードで表示されます)
・<META>タグやHTTPヘッダーがInternet Explorer 7 標準モード
・<META>タグやHTTPヘッダーがInternet Explorer 8 標準モード

上記以外に開発者がWeb サイトをどのように描画させたいのかをコード内に明示していない場合など、
Internet Explorer 7 互換表示モードに切り替えることに合理的な理由がある場合にだけ表示されます。

レンダリング調整の優先順位

1位 meta要素
2位 HTTPレスポンスヘッダ
3位 DOCTYPE

レンダリングモードを検出するJavaScript

document.documentMode

長くなってしまいましたが、感想としてはややこしい。
WebページやWebサーバーなどで、レンダリングモードを強制的に指定できるのは良いと思います


引用している部分はこちらのサイトにお世話になりました。
Moto Ishizawaさんありがとうございました。