Web Application Programming Wiki*

レンダリング時に準拠するCSS仕様の切り替え・指定方法について。

IE
新規サイト作成時にどうすべきか

IE

CSSの解釈のモードについてはブラウザ/CSSバージョンを参照のこと。

モード選択の方法

IE6/IE7
- !DOCTYPEスイッチ
  !DOCTYPE宣言の内容で切り替える。#DOCTYPE参照。
IE8
モード選択方法自体の選択があると理解した。(直接指定という用語はMSの説明にはなく、ここで勝手に作った用語。)
- !DOCTYPEスイッチ
  IE6/IE7と同じく!DOCTYPEで切り替え
- 直接指定
  IE8モード,IE7モード,IE5モードを直接指定
- edgeモード
  使用可能な最高なモードを使う。IE8であればIE8モードを使う。

IE8におけるモード選択方法の指定

metaタグのhttp-equiv ヘッダーで指定する。

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

titleや他のmetaより前に置く必要がある。
contentへの指定は次のとおり。

IE=8	直接指定 IE8モード
IE=7	直接指定 IE7モード
IE=5	直接指定 IE5モード
IE=edge	edgeモード
IE=EmulateIE7	!DOCTYPEスイッチ。 IE7と同等であり、!DOCTYPEスイッチにより標準準拠モードを使うと判断された場合にはIE7モードを、互換モードの場合はIE5モードを適用。
IE=EmulateIE8	!DOCTYPEスイッチ。 !DOCTYPEスイッチにより標準準拠モードを使うと判断された場合にはIE8モードを、互換モードの場合はIE5モードを適用。

※ IE=EmulateIE8が指定可能なことは以下の文書に記載。
http://msdn.microsoft.com/ja-jp/ie/dd218492.aspx

HTTP レスポンスヘッダで指定する

X-UA-Compatible: IE=EmulateIE7

ヘッダの値はmetaタグの場合と同じ

metaタグとHTTPレスポンスヘッダの両方で指定した場合は、metaタグ優先。

X-UA-Compatibleを指定しなかった場合

IE=EmulateIE8 を指定した場合と同じ。
ただし、!DOCTYPEスイッチにより標準準拠モードが選択された場合で、以下の例外に該当する場合はIE8モードではなく、IE7モードが使われる(と思われる)。

[互換表示]アイコンをクリックした場合
その他、互換表示を利用するようIEを設定している場合(たとえば[ツール]-[互換表示設定]。他にもあるのかもしれない。)

なお、[互換表示]アイコンは、X-UA-Compatibleの指定がある場合には表示されない。
モード選択をしなかった場合の上記の挙動はレジストリにて変更可能。

!DOCTYPEスイッチ

!DOCTYPE宣言の有無、内容によって、標準準拠モードか互換モードかが切り替わる。ルールは複雑なため正確には http://msdn.microsoft.com/ja-jp/library/bb250395 での確認が必要。

典型例は次のとおり。

標準準拠モード

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     ※ このようにURLがあると標準準拠モードになる。

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
     ※ Strictの場合はURL有無によらず標準準拠モードになる。

     <?xml version="1.0" encoding="utf-8"?>
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     <?xml version="1.0" encoding="utf-8"?>
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

     ※ XHTMLはURLの有無によらず標準準拠モードになる。
     ※ IE6の場合、!DOCTYPE宣言がファイルの1行目である必要がある。このため、
     <?xml ... ?>があると、XHTMLの!DOCTYPE宣言があっても互換モードになってしまう。
     標準準拠モードとするには<?xml ... ?> を省く必要がある。

互換モード

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     ※ このようにURLがないと互換モードになる。

     !DOCTYPEなし

※ http://nagomin0123.web.fc2.com/doctype/doctype.html によれば、標準準拠モードであっても、DOCTYPE宣言によって一部挙動が変わることがある模様。

現在の表示で使われているモードの確認(IE8)

IE8では以下の方法で確認できる。

アドレスバーに以下を入力。

javascript:alert(document.documentMode);

5, 7, 8のいずれかが表示される。それぞれIE5モード、IE7モード、IE8モード。

参照した資料

ドキュメント互換性の定義
http://msdn.microsoft.com/library/cc288325.aspx
IE8におけるレンダリング方法の切り替えについての説明

互換表示機能の紹介
http://msdn.microsoft.com/ja-jp/ie/dd218492.aspx
IE8で互換表示を有効にする各種方法の説明

Internet Explorer 6 における CSS の拡張
http://msdn.microsoft.com/ja-jp/library/bb250395
!DOCTYPEスイッチの説明、ほか

Internet Explorer 7.0 に関するカスケードスタイルシートの互換性
http://msdn.microsoft.com/ja-jp/library/bb250496(VS.85).aspx

新規サイト作成時にどうすべきか

とりあえずIEのことだけを考えると。

将来のバージョンのIEでのレイアウト崩れを防ぐためにX-UA-Compatibleを必ず指定する(metaタグまたはHTTPヘッダで)。ただし、IE=edge以外を使う。
IE8やその他CSS2.1準拠ブラウザ向けに開発する場合(IE7をサポート外としたり、IE7での表示乱れを許容する場合)、IE=IE8を指定する。
IE7をサポート対象としたり、IE7の挙動に依存したCSSハック等を利用する場合、IE=IE7を指定する。

※ 新規に作成するサイトでEmulateIE7やEmulateIE8を使う必要はないように追われる。これらの指定を利用すると良いのは、DOCTYPEなしの古いページが混在したサイトで、一括してIE7モードやIE8モードを適用し、DOCTYPEなしには互換モードを適用したい、といった場合かと思われる。

ブラウザ/準拠仕様の切り替え

IE