ブラウザーIE9で、IE9モードで表示するためには、どのように設定したらよいのか（HTML5な人へ）

ややこしいことに、IE9には次の4種類のドキュメント・モード（＝描画モード、レンダリング・モード）が存在する。

これらのモードをしっかりコントロールしないと、期待通りのレンダリングが得られない。
特に、HTML5を利用する場合、ドキュメント・モードのコントロールが必須である。
尚、IE8では上記の3種類、IE10では更に１つ増え、5種類となる。


次のページをIE9で開いたら、F12で開く開発者用画面右上のブラウザーモード、ドキュメントモードのモードを切り替え、表示がどのように変換するか、確認してください。
参考サイト：IE8/IE9 - ブラウザーモード／ドキュメントモードのチェックページ


上記のサイトで、それぞれのモードを変えれば、表示が変わることが分かる。
では、ブラウザーIE9で、IE9モードで、ページを開くにはどうしたらよいか？
下記のような検討をしたところ、どうやらmeta要素できっちり宣言することで、IE9モードになるらしい。

IE9とIE10では若干の違いはあるものの、それほど大きく変わらないと言われている。
IE10でも同様、ブラウザーモード／ドキュメントモードをきっちり制御しないと、
希望するHTML5のレンダリングができなくなる。


このページをIE9で開いたら、F12で開発者用画面を表示する。
この開発者用画面右上のブラウザーモード、ドキュメントモードに注目し、リンクを開いてください。


ie9-0

<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="utf-8"> 
<title>IEの挙動</title>

</head>
<body>
<h1>IE9</h1>
</body>
</html>

ie9-1

<html xmlns="http://www.w3c.org/1999/xhtml" lang="ja">
<head>
<meta charset="utf-8"> 
<title>IEの挙動</title>
</head>
<body>
<h1>Quirks（クワークス）</h1>
</body>
</html>

ie9-2

<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml" lang="ja">
<head>
<meta charset="utf-8"> 
<title>IEの挙動</title>
</head>
<body>
<h1>IE9互換表示のブラウザーモードでは、ドキュメントモードはIE7</h1>
<h1>IE9標準のブラウザーモードでは、ドキュメントモードはIE9</h1>
</body>
</html>

ie9-3

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta charset="utf-8"> 
<title>IEの挙動</title>
</head>
<body>
<h1>IE9</h1>
</body>
</html>

ie9-4

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>IEの挙動</title>

</head>
<body>
<h1>IE9互換表示のブラウザーモードでは、ドキュメントモードはIE7</h1>
<h1>IE9標準のブラウザーモードでは、ドキュメントモードはIE9</h1>
</body>
</html>

2012/10/2　大坂哲司　作成