
IE8のレンダリングモードと互換表示
Internet Explorer 8(IE8)は標準に準拠した形でページを表示するため、古いバージョンのIEに合わせて作成したページを表示するとレイアウトが崩れてしまう可能性がある。そのため、IE8には3種類のレンダリングモードが用意され、古いIEと同じ形でページを表示できるようになっている。
そこで今回は、各レンダリングモードの特徴や指定方法を確認していく。また、ユーザーがレンダリングモードを切り替えないようにするため、IE8に新しく用意された「互換表示ボタン」を隠す方法を紹介したい。
IE8に用意されたレンダリングモード
IE6の時代からIEには下位互換のために複数のレンダリングモードが用意され、必要に応じて古いIEと同じ形でページを表示することができた。たとえば、IE6とIE7には「Standardsモード」(標準準拠モード)と、「Quirksモード」(互換モード)の2種類のレンダリングモードが用意されている。これに対し、IE8には以下の3種類のレンダリングモードが用意された。
レンダリングモード | ページの表示 |
---|---|
IE8 Standardsモード(IE8標準準拠モード) | IE8の機能をフルに利用して表示 |
IE7 Standardsモード(IE7標準準拠モード) | IE7と同等の機能で表示(IE7のStandardsモードに相当) |
Quirksモード(互換モード) | IE5と同等の機能で表示(IE6およびIE7のQuirksモードに相当) |
CSS 2.1の標準規格に準拠した形でページを表示するには、IE8 Standardsモードを利用する。それに対し、IE7やIE5と同じ形でページをレンダリングする場合には、IE7 StandardsモードやQuirksモードを利用する。なお、IE6のStandardsモードに相当するレンダリングモードは用意されていない。
実際に、レンダリングモードによってどのように表示が変わるかを確認してみよう。次のサンプルではoutlineプロパティで黄色のボックスを黄緑色の枠線で囲み、marginプロパティで画面の中央に配置するように指定している。
div{ outline: solid 10px limegreen; margin: auto; }
HELLO
このソースをレンダリングモードを変えて表示すると次のようになる。
IE8 Standardsモードで表示した場合
※ブラウザで表示を確認する
IE7 Standardsモードで表示した場合
※ブラウザで表示を確認する
Quirksモードで表示した場合
※ブラウザで表示を確認する
レンダリングモードの指定
次に、レンダリングモードの指定方法をみていこう。
- コメント(3件)
とすると将来 ie9 が出てもそのページはie8モードなのか。。
ホームページ公開サービスあたりだとサービス主のWebサイトの関係でホームページ公開サービスのドメインも互換表示に設定される事例ががありました。
(少なくとも、@nifty @homepageはnifty.comが互換表示設定に設定されているため、
DOCTYPE宣言でIE8 Standardsモードにしただけでは、IE 7 Standardsモードになっていました。
METAタグを入れることでIE8 Standardsモードで表示されるようになりました。)