[(X)HTML] IE8におけるページの互換モード指定

IE8 の正式版がリリースされたので、その特徴のひとつである互換モードの指定について記載する。

IE8のWeb標準準拠

IE は、独自の解釈やタグが多く、他のブラウザと比べてHTMLやCSSのWeb標準から外れている部分が多いとよく指摘されている。この問題の解決のため、IE8 ではWeb標準準拠への対応により力が入れられており、IE8 標準のレンダリングにはWeb標準準拠モードが使用されている。

Web標準準拠モードによる弊害

しかし、Web制作においてはクロスブラウザ対応が基本であり、IE8 リリース前に制作された大抵のサイトでは、IE6 や IE7 の表示に対応するため、IE にだけ有効な CSS の記述を用いるなど、以前のバージョンの IE への対応を行っている。これによって、一部のサイトでは IE8 の Web標準準拠モードでサイトを閲覧すると、 レイアウトやデザインが崩れることがある。

互換表示モード

この問題に対応するために、IE8 には「互換表示モード」と呼ばれるモードが搭載されている。 このモードを使用することで、サイトの閲覧者は以前のバージョンの IE の描画モードを使用して該当サイトを閲覧することが可能となる。

具体的には、IE8 には次の三つの描画モードが存在する。

  • IE8標準モード(IE8標準、完全な標準CSS)
  • IE7互換モード(IE7標準、IE7互換の標準CSS)
  • Quirksモード(IE5標準、MS-CSS 5/6/7対応)

Quirksモード は該当ページの HTML コード内に DOCTYPE の宣言がない場合や、DOCTYPEで HTML 2.0 や 3.0 などの古いバージョンが指定された場合などで使われる。それ以外の場合で DOCTYPE 宣言があれば、基本的にIE8標準モードが使われる。IE7互換モードは、明示的に使うように指定しない限りは使われない。

互換表示モードの指定方法

互換表示モードは、基本的にはブラウザの設定からユーザにより指定されることで使用されるが、 サイト制作者側で事前に IE8 で該当サイトの表示が崩れることが分かっている場合は、Webページが IE8 で閲覧されたときには、常にIE7互換モードで表示するよう設定することができる。設定方法には以下2種類がある。

  • Webページ単位で設定する方法:タグ利用
  • サイト全体に一括設定する方法:HTTPヘッダ利用

今回は、metaタグによる対応方法のみを以下に記載する。(HTTPヘッダを利用した方法は後日追記する)

metaタグによる互換表示モードの指定

metaタグにより互換表示モードを指定する場合は、以下のメタタグを html のhead要素内に追加する。

<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />

尚、「IE=」の後の部分を編集することで、描画モードを指定することができる。

描画モード
最新edge
IE8標準emulateIE8 or 8
IE7互換emulateIE7 or 7
Quirks5

IE8標準 と IE7互換 を指定する際に、バージョンの前に「emulateIE」を付ける場合と付けない場合があるが、付ける付けないで微妙に動作が変わってくる。
詳しくは参考サイトで。

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/81

コメント投稿フォーム