IE8のレンダリングモードと互換表示

　Internet Explorer 8（IE8）は標準に準拠した形でページを表示するため、古いバージョンのIEに合わせて作成したページを表示するとレイアウトが崩れてしまう可能性がある。そのため、IE8には3種類のレンダリングモードが用意され、古いIEと同じ形でページを表示できるようになっている。

　そこで今回は、各レンダリングモードの特徴や指定方法を確認していく。また、ユーザーがレンダリングモードを切り替えないようにするため、IE8に新しく用意された「互換表示ボタン」を隠す方法を紹介したい。

IE8に用意されたレンダリングモード

　IE6の時代からIEには下位互換のために複数のレンダリングモードが用意され、必要に応じて古いIEと同じ形でページを表示することができた。たとえば、IE6とIE7には「Standardsモード」（標準準拠モード）と、「Quirksモード」（互換モード）の2種類のレンダリングモードが用意されている。これに対し、IE8には以下の3種類のレンダリングモードが用意された。

　CSS 2.1の標準規格に準拠した形でページを表示するには、IE8 Standardsモードを利用する。それに対し、IE7やIE5と同じ形でページをレンダリングする場合には、IE7 StandardsモードやQuirksモードを利用する。なお、IE6のStandardsモードに相当するレンダリングモードは用意されていない。

　実際に、レンダリングモードによってどのように表示が変わるかを確認してみよう。次のサンプルではoutlineプロパティで黄色のボックスを黄緑色の枠線で囲み、marginプロパティで画面の中央に配置するように指定している。

div{
outline: solid 10px limegreen;
margin: auto;
}

HELLO

　このソースをレンダリングモードを変えて表示すると次のようになる。

IE8 Standardsモードで表示した場合

outlineとmarginで指定した通りの表示になる（画像をクリックすると拡大します）

※ブラウザで表示を確認する

IE7 Standardsモードで表示した場合

IE7はoutlineの指定に未対応なので黄緑色の枠線が表示されなくなる（画像をクリックすると拡大します）

※ブラウザで表示を確認する

Quirksモードで表示した場合

IE5はmargin:autoの指定に未対応なのでボックスが左側に配置される（画像をクリックすると拡大します）

※ブラウザで表示を確認する

レンダリングモードの指定

　次に、レンダリングモードの指定方法をみていこう。