builder by ZDNet Japanをご愛読頂きありがとうございます。

builder by ZDNet Japanは2022年1月31日にサービスを終了いたします。

長らくのご愛読ありがとうございました。

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の指定に未対応なのでボックスが左側に配置される(画像をクリックすると拡大します)
ブラウザで表示を確認する

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

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

ブログの新規登録は、2021年12月22日に終了いたしました。

folllow builer on twitter
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]