DOCTYPEスイッチについて
DOCTYPE宣言によって、ブラウザでの表示モードが変わります。これは、CSSレイアウトをするときには非常に重要になります。
| DOCTYPE | IE7 | IE6 | Gecko系 | Opera | Safari | MacIE5 |
|---|---|---|---|---|---|---|
| HTML4.01 Transitional システム識別子なし | 互換 | 互換 | 互換 | 互換 | 互換 | 互換 |
| HTML4.01 Transitional システム識別子あり | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 |
| HTML4.01 Strict システム識別子なし | 標準 | 標準 | 標準 | 標準 | 標準 | 互換 |
| HTML4.01 Strict システム識別子あり | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 |
| XHTML1.0 XML宣言あり | 標準 | 互換 | 標準 | 標準 | 標準 | 標準 |
| XHTML1.0 XML宣言なし | 標準 | 標準 | 標準 | 標準 | 標準 | 標準 |
Gecko系とあるのはFirefox、Netscape6以上などのレンダリングエンジンにGeckoを使っているブラウザです。なお、Gecko系ブラウザの場合、HTML4.01 Transitonal DTD（システム識別子あり）とXHTML1.0 Transitonal DTDでは「ほぼ標準」モードになります。
HTML4.01でのシステム識別子というのは、"http://www.w3.org/TR/html4/loose.dtd"といった部分です。
Windows版のInternet Explorer 5.xやNetscape4.xにはDOCTYPEスイッチはありません。すべて互換モードで表示されます。
また、DOCTYPEを宣言しなかった場合は、すべて互換モードになります。
標準モードと互換モードの違い
「標準モード」は、Gecko系ブラウザのもつ「ほぼ標準モード」も含めます。
「互換モード」はDOCTYPEスイッチもなかった頃のブラウザとの互換性をとるための表示モードです。主にInternet Explorerをメインに解説します。それは、読者の皆さんがよく使われるのがInternet Explorerだからです。
- 文字の大きさ
- 標準モードではmediumですが、互換モードではsmallです。（Operaも）
- margin : auto;によるセンタリング
- 標準モードではセンタリング可能です。互換モードの場合はできません。
- ボックスwidthとheightの値
- 標準モードでは内容部分のみです。互換モードでは、padding、borderの幅も含めてしまいます。（Operaも）
以上の違いは、Gecko系ブラウザで互換モードとなった場合には見られません。すべて標準モードと同じですので、互換モードで表示モードをそろえていても、Firefoxだけ表示が違う！ということに陥ります。
ちなみに、Gecko系ブラウザの「ほぼ標準モード」と「標準モード」の違いは、「Gecko's "Almost Standards" Mode」を参照してください。
