Internet Explorer 10の互換性の調査と対応をしていて調べでまとめたことを忘れないうちにメモ。
駆け足で調査した部分も多いので、間違っているところなどに突っ込みをいただけると大変ありがたいです。
IE10のドキュメントモード
ドキュメントモードとは、HTMLの解釈が利用できる機能(JavaScriptやCSSの属性含む)のモードのこと。IE10では以下のドキュメントモードを内蔵している。
- IE5 Quirks:互換モード(IE5に準じた解釈を行う)
- IE7 Standards:IE7標準モード(IE7が『標準』として解釈していたモードを再現する)
- IE8 Standards:IE8標準モード(IE8が『標準』として解釈していたモードを再現する)
- IE9 Standards:IE9標準モード(IE9が『標準』として解釈していたモードを再現する)
- Standards:標準モード(IE10としての標準モード)
『(IExx)Standards』は、それぞれのバージョンとして実装されている(いた)標準準拠にのっとった解釈を行います。基本的にバージョンが上がるごとに、いわゆる『web標準』に対する準拠具合が上がっていると考えて良い(と思う)。
ドキュメントモードの指定
IEでは過去のバージョンと互換性を再現するために、コンテンツ提供者が『どのように解釈してほしいか』を指定する手段が提供されている。
指定できる種類
以下のいずれかを指定することで、解釈するドキュメントモードを強制することができる。
値 | 意味 |
---|---|
5 | IE5 Quirksにすることを強制する |
7 | IE7 Standardsでの解釈を強制する |
8 | IE8 Standardsでの解釈を強制する |
9 | IE9 Standardsでの解釈を強制する |
10 | IE10 Standardsでの解釈を強制する |
EmulateIE7 | IE7と同様の判定を行った上で、IE7 StandardsもしくはIE5 Quirksで解釈を行う |
EmulateIE8 | IE8と同様の判定を行った上で、IE8 StandardsもしくはIE5 Quirksで解釈を行う |
EmulateIE9 | IE9と同様の判定を行った上で、IE9 StandardsもしくはIE5 Quirksで解釈を行う |
EmulateIE10 | IE10と同様の判定を行った上で、IE10 StandardsもしくはIE5 Quirksで解釈を行う |
edge | 常に最新のIEが持つStandardsで解釈する |
EmulateIExxの解釈について
EmulateIExxが指定された場合、実際のそのバージョンと同じロジックで互換モードが標準モードかの判定を行い、その判定に従って表示するモードが決定される。
判定ロジックは大まかには以下の流れとなっている。詳細はそれぞれのバージョンのIEの資料などを参照すること。
- !DOCTYPEが指定されていない場合、Quirks
- !DOCTYPEがHTML4.0未満の場合、Quirks
- !DOCTYPEが指定されていて、かつ、Strictの場合、それぞれのStandardsで解釈される
- !DOCTYPEが指定されていて、かつ、Strictでない場合やdtdのURLが無い場合など
※詳細は別途、パターンを確認する予定。
指定の具体的な方法
上記のドキュメントモードの指定具体的に行う方法には、大まかに二通りの方法がある。
- HTMLドキュメント内でmeta要素で指定
- HTTPレスポンスヘッダにて、カスタムヘッダで指定
それぞれの具体的な指定方法は以下の通り。
1.HTMLドキュメント内でmeta要素で指定
meta要素にて、http-equiv属性X-UA-Compatibleで指定する。
<IE7 Standardsでの解釈を強制する例>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
2.HTTPレスポンスヘッダにて、カスタムヘッダで指定
任意の方法で以下の形のカスタムヘッダとしてHTTPレスポンスヘッダを返す。
- フィールド:X-UA-Compatible
- 値:IE=xxx(上記の指定の値)
なお、IISの場合はアプリケーションのコード中から出力するほかに、以下の方法などで指定可能。
1.web.configで設定する
<configuration> <system.webServer> <httpProtocol> <customHeaders> <clear /> <add name="X-UA-Compatible" value="IE=EmulateIE7" /> </customHeaders> </httpProtocol> </system.webServer> </configuration>
※ただし、私が試したところ、IIS6/ASP.NET 2.0のWebアプリケーションでうまく設定が有効にならなかった。原因は不明で現在調査中。
2.IISの管理コンソールなどから設定する
IISの管理コンソールのカスタムヘッダー設定欄から設定する。サイト単位、仮想ディレクトリ単位、アプリケーション単位などで指定可能。
UserAgentの値についての注意
IEではUserAgentはその取得方法によっては、実行されたドキュメントモードによって取得できる値が変化する場合がある。以下のような挙動がとられる。
- 最終的に解釈されたドキュメントモードにより、JavaScriptのnavigator.userAgentが変化する
- ただし、サーバに対して通知されるUserAgentは解釈されたドキュメントモードに依存しない
つまり、ブラウザ『IE9』上で、metaによりIE=7が指定されたドキュメントを表示する場合、以下のようになる。
- サーバサイドに送出されたUserAgent:MSIE 9.0
- JavaScriptにてnavigator.userAgentで取得した値:MSIE 7.0
ドキュメントモード指定についてのその他のトピックス
その他、気になったことのメモ
- "Internet Explorer 8で閲覧している際に『9』が指定された場合"のように、見ているブラウザが知らないバージョンの指定については、ブラウザから無視される。
- 最終的にどのドキュメントモードで解釈されたのかは、JavaScriptにて以下のプロパティで確認できる:document.documentMode
- コンテンツ作成者によるこれらの方法で指定されたドキュメントモードは、後述する『ユーザ側ブラウザでの互換表示設定』をオーバーライドする
- ただし、F12開発者ツールでドキュメントモードを指定された場合は、そちらが優先される
- IE11が無い現時点で状態で『IE=EmulateIE10』を指定する意味があるかないかといわれると*1、現状は無いがIE11が出た時点でIE10互換の動作をすることが一応期待できる…と思う。
IEの互換表示機能
IEにはユーザがブラウザで設定を行うことなどにより、互換表示を行うことができる。
互換表示設定は以下の方法などで設定を行うことができる
- アドレスバー横のアイコン
- ツールメニューによる設定(メニューバーを表示していない場合は、altキー押下により行う)
これらの設定はそのページ単位で行うだけでなく、サイト単位で行うことも可能。またマイクロソフトにより配布される互換表示リストにも従う。
意識しておくと良いこと
原則として、この互換表示設定を行うと、ブラウザは以下の挙動をとるので、意識しておくと良いと思われる。