IEの標準モードと互換モード - CSSめも

2021.4.1 移転しました...

はてなブックマーク

目次

  1. 標準準拠モードと後方互換モード
  2. 文書型宣言
  3. 確認ページ
  4. 対策
  5. IE8の「互換表示設定」と「モードスイッチ」
  6. 備考

標準準拠モードと後方互換モード

標準準拠モード

IEのバージョン6以上。いわゆる（それなり？）標準準拠なので互換モードよりはかなりバグは少ない。でもFirefoxやOperaに比べるとやはりおかしな挙動がある。また、IE7とIE6でも差異が見られる。

IE6では width を指定しないブロックレベル要素で後述の互換モード時と同様な問題が出ることがあります。（但し、width の計算は標準）

後方互換モード

IE5など古いバージョンのブラウザにも対応したモード。IEのそれは別名【変態】モードなんて言い方もあったり（笑）。IE5は標準準拠ではないので、IE5対応を考えてあえてこのモードを使う場合も多いようです。

よく知られる、というか私の知ってる問題点に以下のものがあります。

width の指定で修正される場合が多いのですが、その計算方法が標準モード時とは違うことに注意する必要があります。普通に指定すると他のブラウザで表示がおかしくなってしまいます。

文書型宣言

htmlファイルの先頭に書くべきものかな。HTML 4.01 Transitional では以下の通り。

IE6/7/8ではシステム識別子の有無でモードが選択されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

確認ページ

各々のモードについて確認してみました。

EmulateIE8 指定
EmulateIE7 指定
IE 5 指定

IE5には標準モードはないのですべて互換モードとなります。IE5では未確認なので多分修正できてないと思います。

※ IE7/8 上ではIE5と全く同様の表示とはならないようです。

アンダースコア フィルタ（アンダースコアハック）

文法違反となりますが、IEのバグ（独自仕様？）を利用して、IEのみに属性の値を上書きさせます。IE7の標準モードでは無効です。

条件分岐コメント（コンディショナルコメント）

IEの独自規格ですが、文法違反とはならないようです。コメント（<!-- -->）でIE用CSSを振り分けします。

対策

標準モードに関してはIE7では問題は少ないと思いますが、IE6での確認は必須だと思います。

また、IE5などに対応するためには別の手段が必要。

互換モードでは、IE5/6/7はほぼ同じ設定が使えると思いますが、他のブラウザに適用されないように（つまりIEのみ適用される）手段を採る必要がありますね。

個人的には、商用サイトなどを除きIE5まで対応を考えるべきかは疑問です。CSSをオフにしても読めるようにHTMLは正しく書いておくべきだと思いますけど。

IE8の「互換表示設定」と「モードスイッチ」

IE8ではブラウザに「互換表示」ボタン、及びファイルの meta 要素での「モードスイッチ」が実装されました。

「互換表示」設定

ブラウザ側での操作。

F12キー（またはメニューの【ツール】→【開発者ツール】）でも確認・切替が可能ですね。

互換表示リスト

「互換表示一覧用の更新プログラム」がインストール済みで、「マイクロソフトからの更新された Web サイト一覧を含める」の設定が有効な場合、登録されているサイトでは互換表示設定が有効となります（※ IE7モードとなる）。互換表示ボタンは非表示となりますね。

※ 設定が有効でも非登録サイトでは通常通り。

尚、登録サイトであっても meta 要素で指定すればIE8モードでの表示も可能になりました。

モードスイッチ

こちらは製作者側での操作。

※ 外部CSSファイルの指定より前に指定する必要すること。（link 要素より先に）

X-UA-compatible ヘッダーでは、大文字と小文字が区別されません。ただし、他のすべての要素よりも先に (TITLE 要素と他の META 要素は除く)、Web ページのヘッダー (HEAD セクション) 内に記述される必要があります。

META タグと将来の互換性のロック

下記は、HTML 4.01 の場合です。（※【注意】XHTML では  /> でタグを閉じること 

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

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

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

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

IE互換タブブラウザ（※ unDonut）“など”では無指定だと互換表示設定（※ IE7モード）となったりしたので、IE8向けには IE=edge を指定しておいた方が安全かもしれませんね。

標準準拠により近付いたのはいいことなのですが、今までのIEハックのIE8向け修正が必要になったりで、ちょっと確認はややこしいかも。

IE8モードで作成しても閲覧者側の設定次第でIE7モードとなることもあるので、結局、IE7/IE8 の両方で確認は必要でしょうか。或いは、IE=7 で常にIE7モードにしたら確認は楽かも（邪道かな？）

備考

IE8 について追記。

「互換表示リスト」について追記

確認ページを修正

最終更新日：2010.7.25