X-UA-Compatibleの指定でIE11をIE10で表示させる

IE8からドキュメントモード(どのバージョンのIEのレンダリング状態で表示させるか)が指定できる機能が導入されました。HTTPヘッダにX-UA-Compatibleヘッダを加えてあげることで、指定したバージョンのIEのレンダリング状態で表示させることができます。

1. X-UA-Compatibleヘッダを加える

HTTPヘッダに任意の情報を加えるには、様々な方法があると思います。一番簡単な方法はmeta要素でhttp-equiv属性を加える方法でしょうが、場合によっては非効率ですので、サーバの設定ファイルで済ませるのが効率的でしょう。

たとえば、Apacheであれば、mod_headers.soのheaders_moduleがロードできていれば、次のように記述することで指定の範囲のドキュメントすべてで有効にできます。

<IfModule headers_module>
Header set X-UA-Compatible "IE=10"
</IfModule>

これでIE11でIE10と同様のレンダリングが確保できます。

2. 他のバージョンのIEの振る舞いはどうなるのか

こういう特別な指定を加えると心配になるのが、他のバージョン(古いバージョンや新しいバージョン)での不具合につながらないかどうかです。この点はMicrosoft側が良く考えてくれているみたいです。

Header set X-UA-Compatible "IE=12"

たとえば、こんな風にIE=12と指定したとします。Internet Explorer 12はまだリリースされていないバージョンのブラウザですが、このように記述した場合、IE11ではIE11のレンダリング、IE10はIE10のレンダリング、IE9はIE9のレンダリング、IE8はIE8のレンダリングを行うようです。つまり、自身のバージョンの数字にもっとも近いバージョンでレンダリングするようになっているようです。もし、IE12がリリースされたらIE12はIE12で、IE13はIE12モードでレンダリングすることになるでしょう。

先のHeader set X-UA-Compatible "IE=10"であれば、IE11はIE10モード、IE10はIE10、IE9はIE9、IE8はIE8というわけですね。

ドキュメント互換性の定義より

たとえば、content 属性を IE=7.5 に設定すると、 Internet Explorer はこの値から バージョン ベクターへの変換を試み、その結果に最も近いモードを選択します。

3. 複数のドキュメント モードを指定する

たとえば、IE8はIE7モードで、IE9, IE10, IE11はIE9モードで表示させたい場合は次のように各モードをセミコロン(;)で区切って記述します。

Header set X-UA-Compatible "IE=7; IE=9"
ドキュメント互換性の定義より

要求された互換モードを 2 つ以上サポートする Internet Explorer のバージョンは、ヘッダーの content 属性でリストされている、使用可能なモードのうち最高のモードを使用します。 この事実を利用して、特定の互換モードを除外することは可能ですが、この方法はお勧めできません。 たとえば、次のヘッダーは IE7 モードを除外します。

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" >

これに習うとIE10以前は自バージョンと同じにしてIE11のみを除外して、以降のIE12はIE12でIE13はIE13でIE14がでたらIE14モードというようにするには次のように記述すれば良いでしょう(自信はないですが、Microsoft提供のドキュメントを解釈した上では)。

Header set X-UA-Compatible "IE=10; IE=12; IE=100"

ただし、この方法はお勧めできません。と述べられていますので、ご使用は計画的におこなわれることをお勧めいたします。

ちなみにこのドキュメントモードの指定そのものがIE11からは非推奨です(ドキュメント モードの非推奨)。もしかしたらそのうち廃止されるのかも。そもそもこんなややこしい仕様は存在しない方が良いのでIE12からは廃止になって、X-UA-Compatibleヘッダそのものを無視する仕様になってくれることを切に願います。

Updated / Published