需要があり、IE8について勉強しています。新しいことを勉強するのは楽しいものですね。まずはレンダリングモードから。

3つのレンダリングモード

IE8には3つのレンダリングモードがあります。レンダリングモードが異なればHTML、CSSの解釈が異なり表示結果が異なりますので、このモードの選択のされ方は非常に重要です。

IE <= 6 IE 7 IE 8
Quirks mode IE 7 Standards mode IE 8 Standards mode
IE 7 Layout   IE 8 Layout

  • IE8標準準拠モード(IE 8 Standards mode)

  • IE7標準準拠モード(IE 7 Standards mode)

  • Quirksモード(互換モード)

IE8はデフォルトでは「IE8標準準拠モード」になります。一時新しいモードは非デフォルトになるという話がありましたが、方針転換されたようです。

  • 参考：
    • [スラッシュドット・ジャパン IE8のWeb標準準拠モードは非デフォルトに](http://slashdot.jp/it/article.pl?sid=08/01/25/038259)
    • [スラッシュドット・ジャパン IE8はフル標準モードでのレンダリングがデフォルトに](http://slashdot.jp/it/article.pl?sid=08/03/05/028243)

Quirksモードに切り替わる条件

IE8には3つモードがありますが、まずは過去のIE(IE6, IE7)でもすでに概念として存在していた「標準準拠モード(standards-compliant mode)になるかQuirksモードになるか」という判断基準から解説します。

これは、!DOCTYPEの書き方等により決定されます。以下がQuirksモードに切り替わる条件です。IE6以降すべて同じ条件です。

  • DOCTYPE宣言が存在しない

  • HTML3.0以下

  • HTML4.0 TransitionalまたはFramesetのDOCTYPE宣言にURLを含まない

以下がこれらの条件をまとめた表です(!DOCTYPEより引用)。standards-compliant modeがONになるかどうかという観点でまとめられています。

DOCTYPE URL Present URL Not Present
No DOCTYPE present off off
HTML (no version) off off
HTML 2.0 off off
HTML 3.0 off off
HTML 4.0 on on
HTML 4.0 Frameset on off
HTML 4.0 Transitional on off
HTML 4.0 Strict on on
XHTML on on
XML on on
Unrecognized DOCTYPE on on

以下は具体例です。

// どちらもHTML4.0なのでstandards-compliant modeになる<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

// HTML 4.0 TransitionalでURLがないのでQuirksモードになる<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

// HTML 4.0 TransitionalでURLがあるのでstandards-compliant modeになる<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

IE8標準準拠モードとIE7標準準拠モードの選択

「IE8標準準拠モード」になるのか「IE7標準準拠モード」になるのかは大きくわけて2つ選択基準があります。

  • IE8の「Emulate IE7」ボタン機能の有効、無効(※ただし、正式版では「Emulate IE7」ボタンは外される可能性が高いとのこと)
  • Webページ、Webサーバー側での意図的な指定
    • ページのmeta要素での指定(ページ単位での設定に向く)
    • HTTPレスポンスヘッダでの指定(サーバー、サイト単位での設定に向く)

サイト管理者側でコントロールできるようになったのが今回のIE8での新しい点です。これにより、既存のサイトにも手を入れる必要が出てきてしまったことも事実です。

meta要素でのレンダリングモードの指定方法

Webページ内のmeta要素にてページ個別に指定できます。

// IE8標準準拠モードを指定
<meta http-equiv="X-UA-Compatible" content="IE=8">