Hatena::Groupsubtech

ういはるかぜの化学

Saturday, April 23, 2011

[]X-UA-Compatibleが有効にならないことがあるケース 19:27 X-UA-Compatibleが有効にならないことがあるケース - ういはるかぜの化学 を含むブックマーク はてなブックマーク - X-UA-Compatibleが有効にならないことがあるケース - ういはるかぜの化学

Internet Explorerは8以降、HTTPレスポンスヘッダ(かmeta要素)にX-UA-Compatibleというフィールドをセットすることでどのバージョン(7,8,9)と同じように判定・レンダリングするか指定できる仕組みがあります。(no title)

そんなスイッチです場合によってはHTMLに間違いなく書いてあるのになぜかうまく動かないことがあります

まずはEmulateIE7を指定してちゃんと動作するケースです

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>はうはう</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js"></script>
</head>
<body>
<p>document.documentMode: <script>document.write(document.documentMode)</script></p>
</body>
</html>

IE8/9などで表示するとdocument.documentMode: 7と表示され、F12 開発者ツールを表示していると「ドキュメントモード: IE7 標準」とIE7モードになっていることがわかります。F12 開発者ツールを起動したままページを開くとコンソールに以下のメッセージが表示されます

HTML1113: ドキュメント モードIE9 標準 から IE7 標準 に変更して再起動

そしてEmulateIE7を指定しても無視されて有効にならないケースです

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>はうはう</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
</head>
<body>
<p>document.documentMode: <script>document.write(document.documentMode)</script></p>
</body>
</html>

IE9で表示するとEmulateIE7を指定しているにもかかわらずdocument.documentMode: 9と表示され、「ドキュメントモード: IE9 標準」とIE9モードになってしまいます。このケースの場合、F12 開発者ツールを起動したままページを開くとコンソールに以下のメッセージが表示されます

HTML1115: X-UA-Compatible META タグ ('IE=EmulateIE7') は、ドキュメント モードが既に最終処理されたため、無視されます

ソースほとんど同じですがなぜ後者ではダメなのでしょうか。

そもそもInternet ExplorerHTMLドキュメントを解析しX-UA-Compatibleを見つけるとレンダリングエンジン最初にあるメッセージ通り「再起動」することで別なバージョンレンダリングエンジン処理できるようにします。

ところがX-UA-Compatibleを見つける前に外部リソースへのアクセス、このサンプルコードでは外部スクリプトですが、ほかにlink要素でスタイルシートを参照しているなど外部リソースへのアクセスがあるとその時点処理をせざるを得なくなるためドキュメント モードは確定となります

それが「ドキュメント モードが既に最終処理されたため、無視されます」の意味で、ドキュメント モードが変わらない理由です

処理せざるを得なくなるという意味では外部リソースへのアクセスでなくともstyle要素やscript要素が先に見つかった場合にも同様にその時点ドキュメント モードは確定します。

ということでX-UA-Compatibleを書く場合には適当に書いておくのではなくすべての外部リソースへのアクセスscript/style要素より先に、たとえばhead要素の頭かmeta charsetの次ぐらいに書くのをオススメします。

参考: Removing the IE9 Compatibility Button, and HTML1115 warning – Out Of The Box