複数ブラウザでの確認を怠らない ～ブラウザーモードとドキュメントモード～

WEBサイトのレイアウトを変更していると、自分がよく使用するブラウザでの確認がメインになり、それ以外のブラウザでの確認が疎かになってしまうことが、よくあります。

自分は使用しているブラウザがChromeメインなので、他のブラウザ（あるいは、下位のバージョン）で見た場合のレイアウトを疎かにしていました。

特にIEの場合、ブラウザのメジャーバージョンによって、サイトの表示が大きく異なってしまう場合があります。私の場合も、IE7、IE8、IE9でそれぞれ異なっていました。
※IE6は完全に捨てています。

やっかいなIEですが、ブラウザーモードとドキュメントモードを利用することで、古いバージョンの表示をエミュレートして確認することができます。

方法は、
ご使用のInternet Explorerの右上より、
「ツール」=> 「開発者ツール」(又はF12キー)を押す

で、以下のようなレイアウトが表示されます。
(※これは、IE9の場合。IE8でも同じような操作です。)

で、この中に「ドキュメントモード」タブと、

「ブラウザモード」がありますので、

確認したいIEのバージョンを選択することで、表示をエミュレートできます。
※Quirks（クアークス）モードとは、IE5相当の古い描画エンジンによる表示を行います。

さて、この「ドキュメントモード」と「ブラウザモード」というモードが２つあり、ややこしいのですが、

ドキュメントモードは、
条件付きコメントやユーザーエージェントには影響を与えず、コンテンツの描画方法を決定するもの。つまり、レンダリングエンジンの決定に影響を与え、

ブラウザモードは、
条件付きコメントやユーザーエージェントに影響し、ブラウザ全体の挙動を決める。つまり、プログラムや条件付きコメントなどで、ユーザーエージェントを参照して挙動を決定している箇所に影響を与える。

ものと認識しています。

ドキュメントモードの決定には、下のフローチャートのような、すごくややこしい要素が関るようなのですが、どちらのモードも自分が確認したいIEのバージョンに設定して確認すればいいかと思います。

全画面は、ドキュメントモード決定フローチャートを参照ください。

詳細は、Internet Explorerの開発者ツールの概要を確認ください。

いい感じ！