現在Youtubeに注力してますので是非チャンネル登録お願いします!

胡田昌彦のコンピューター系チャンネル

[browzer] IE8の3つレンダリングモードを理解する

この記事は約4分で読めます。

需要があり、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標準準拠モード」になります。一時新しいモードは非デフォルトになるという話がありましたが、方針転換されたようです。

    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">

      コメント

      1. えび より:

        http://www.mozilla.gr.jp/standards/webtips0014.html
        Mozillaにも複数のレンダリングモードがあるのですね。意識してませんでしたが、言われてみれば納得です。

      2. えび より:

        http://homepage2.nifty.com/Shouji/pc/css/ss-dtd.html
        この記事も複数のレンダリングモードに詳しい。