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

エ・ビスコム・テック・ラボ
2009-04-06 11:20:01
  • このエントリーをはてなブックマークに追加

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

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

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

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

IE8に用意されたレンダリングモード
レンダリングモードページの表示
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モードで表示した場合

outlineとmarginで指定した通りの表示になる(画像をクリックすると拡大します) outlineとmarginで指定した通りの表示になる(画像をクリックすると拡大します)
ブラウザで表示を確認する

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

IE7はoutlineの指定に未対応なので黄緑色の枠線が表示されなくなる(画像をクリックすると拡大します) IE7はoutlineの指定に未対応なので黄緑色の枠線が表示されなくなる(画像をクリックすると拡大します)
ブラウザで表示を確認する

Quirksモードで表示した場合

IE5はmargin:autoの指定に未対応なのでボックスが左側に配置される(画像をクリックすると拡大します) IE5はmargin:autoの指定に未対応なのでボックスが左側に配置される(画像をクリックすると拡大します)
ブラウザで表示を確認する

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

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

  • コメント(3件)
#1 anonymous   2009-04-06 23:51:24
Internet Explorer の [互換表示設定] で [マイクロソフトからの更新された Web サイト一覧を含める]にチェックを入れたときのレンダリングモードの指定が抜けているのではないでしょうか。

ホームページ公開サービスあたりだとサービス主のWebサイトの関係でホームページ公開サービスのドメインも互換表示に設定される事例ががありました。
(少なくとも、@nifty @homepageはnifty.comが互換表示設定に設定されているため、
DOCTYPE宣言でIE8 Standardsモードにしただけでは、IE 7 Standardsモードになっていました。
METAタグを入れることでIE8 Standardsモードで表示されるようになりました。)
#2 anonymous   2009-04-07 04:29:47
これを滑稽と言わずして何を滑稽と言う。ie9ではさらにレンダリングモードが増えるのだろうか。
#3 anonymous   2009-05-20 20:10:28
ほんとだ。サーバ側で

とすると将来 ie9 が出てもそのページはie8モードなのか。。
  • 新着記事
  • 特集
  • ブログ