Doctypeスイッチ (HTMLのバージョンとブラウザの表示モードの関係)
Windows版IE6、Netscape6(Mozilla, Firefoxを含む)、Opera7などや、Mac版IE5以降のブラウザには、文書型宣言<!DOCTYPE>によって「互換モード」「ほぼ標準モード」「標準モード」といった3つの表示モードに切り替わる、「Doctypeスイッチ」と呼ばれる機能が存在します。
- 1.「互換モード」(Quirks Mode)
- 「互換モード」は、Web標準(W3Cの仕様)が定まる以前からの表示方法なので、バグや独自解釈を含め、旧来のブラウザの表示方法と互換性のある表示を行い、文法的なミスもある程度カバーして表示する傾向があります。
- 2.「ほぼ標準モード」(Almost Standards Mode)
- 「ほぼ標準モード」と、「標準モード」との違いは1点だけです。「ほぼ標準モード」では、テーブルセル内のvertical-alignプロパティの初期値が、互換モードと同じbottomなので、セル内に配置した画像が、隙間なく表示されます。一方、「標準モード」では、テーブルセル内のvertical-alignプロパティの初期値がbaselineなので、画像の下部にアルファベットのbaseline以下の領域分の隙間が生じます。
- 3.「標準モード」(Standards Mode)
- 「標準モード」では、Web標準(W3Cの仕様)に沿った表示を行い、文法的な誤りは基本的に無視されます。
「互換モード」でカバーされる文法的ミス
1. HTMLで色指定に#がない(bgcolor=99ccff)、2. CSSで色指定に#がない(color:99ccff)、3. CSSで数値に単位がない(margin:10)、4. CSSで数値と単位の間に空白文字がある(line-height:1.2 em)、5. CSSでキーワードが""で囲まれている(color:"blue")など。
表示モードによる違い
IEとOperaの「互換モード」では、widthプロパティとheightプロパティの値がWeb標準仕様のボックスの内容領域の値を示さず、border、paddingプロパティを含む周辺領域の値を示します(*1)。「標準モード」ではボックスの内容領域の幅と高さを示します。
IEとOperaの「互換モード」における文字の標準サイズは、font-size:smallであり、Web標準の文字の標準サイズfont-size:mediumと異なります。「標準モード」では、font-size:mediumになります。
IEの「互換モード」では、margin:autoによるテーブルなどのブロック要素のセンタリングが行われません。また、img要素におけるpaddingプロパティはサポートされていません。
IEでは常に、text-align:centerでCSSの適用対象でないブロック要素がセンタリングされます。
「ほぼ標準モード」では、テーブルセル内のvertical-alignプロパティの初期値が、互換モードと同じbottomなので、セル内に配置した画像が、隙間なく表示されます。一方、「標準モード」では、テーブルセル内のvertical-alignプロパティの初期値がbaselineなので、画像の下部にアルファベットのbaseline以下の領域分の隙間が生じます。
「標準モード」においては、テーブル内の記述にテーブル外部のスタイルが継承されます。また、「互換モード」でカバーされる文法的な誤りは、基本的に無視されます。
DOCTYPEによるブラウザの表示モード
| Quirks Mode | 互換モード |
| Almost Standards Mode | ほぼ標準モード |
| Standards Mode | 標準モード |
- NS6
- Mozilla 0.6 - 0.9.4 & Netscape 6.0 - 6.2.3
- Old Moz
- Mozilla 0.9.5 - 1.1 alpha & Mozilla 1.0
- Moz & Safari & Opera 10 & HTML5
- Mozilla 1.0.1, Mozilla 1.1 beta - , Firefox & Netscape 7, Safari 0.9 - 4.0 beta, Opera 10, Chrome, Konqueror 3.5, HTML5 仕様書で記述されている振る舞い
- Opera 9.0
- Opera 9.0 - 9.20
- IE8 & Opera 9.5
- IE 8 のデフォルトで、meta要素やHTTPヘッダで X-UA-Compatible がないもの、もしくは互換ビューも上書きがないもの (このケースにおける "A" は IE8 の Almost Standards mode), Opera 7.5 - 8.54 & 9.5 - 9.6
- IE7 & Opera 7.10
- IE 7, IE 8 でmeta要素やHTTPヘッダで X-UA-Compatible や互換ビューを上書きしたもの (このケースにおける "A" は IE7 mode) & Opera 7.10 - 7.23
- IE6 & Opera 7.0
- IE 6 & Opera 7.0 - 7.03
- Mac IE5
- Mac IE 5.0 - 5.2.3
- Konq 3.2
- Konqueror 3.2.2 - 3.3 (たぶん 3.1 - 3.2.1 も含まれると思うが未確認)
<!--■ IE8 のブラウザ互換表示機能 X-UA-Compatible (大文字小文字を区別しません)-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> <!--IE8モード (アドレスバーに互換表示ボタン)-->
<meta http-equiv="X-UA-Compatible" content="IE=8"> <!--IE8モード-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <!--IE7モード (アドレスバーに互換表示ボタン)-->
<meta http-equiv="X-UA-Compatible" content="IE=7"> <!--IE7モード-->
<meta http-equiv="X-UA-Compatible" content="IE=6"> <!--IE6モード-->
<meta http-equiv="X-UA-Compatible" content="IE=5"> <!--IE5モード-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--最新エンジンモード-->
<meta http-equiv="X-UA-Compatible" content="IE=5; IE6; IE=7"> <!--複数指定時、最新モードを優先-->
|
