掲示板でも書きましたが、最近のブラウザはDOCTYPE宣言によって表示の仕方を自動で切り替えます。
以下は Web Designing [ vol.2 ] のものを一部手を加えて転載しています。
その機能を搭載したブラウザは Netscape6 と Mac版IE5、Windows版のIE6 です。これらのブラウザは２つの表示モードを有しています。
一つはW3Cの標準的な仕様に準拠したモード、もう一つはこれまでのWebブラウザの表示方法と互換性を持たせたモードです。
HTMLのバージョンのほか、DTDのURLを指定するかどうかによってもどちらかのモードになるかが異なるので注意が必要です。
では、そのモードによってどのくらい変わるのか、先ずは実際の例を見てみましょう。
DOCTYPE宣言による表示の確認
このページを Windows版IE5、または Mac版IE4 で見た後、Netscape6 で見てみて下さい。
確認できない方は僕の環境で Windows版IE5（互換モードの例） と Netscape6（標準モードの例） で見た結果を画像として置いておきます。
これは間違いなく同じHTMLファイルですが、見た目はこうも変わってしまいます。
では、次にどのようなDOCTYPE宣言を指定したときに標準モードと互換モードを切り替えるのか表にしてみました。
| DOCTYPE宣言 | Netscape 6 | IE 6 | Mac版IE 5 |
|---|---|---|---|
| なし | 互換モード | 互換モード | 互換モード |
| HTML 2.0 | 互換モード | 互換モード | 互換モード |
| HTML 3.2 | 互換モード | 互換モード | 互換モード |
| HTML 4.0 Strict（URLなし） | 標準モード | 標準モード | 標準モード |
| HTML 4.0 Strict（URLあり） | 標準モード | 標準モード | 標準モード |
| HTML 4.0 Transitional（URLなし） | 互換モード | 互換モード | 互換モード |
| HTML 4.0 Transitional（URLあり） | 互換モード | 標準モード | 標準モード |
| HTML 4.01 Strict（URLなし） | 標準モード | 標準モード | 互換モード |
| HTML 4.01 Strict（URLあり） | 標準モード | 標準モード | 標準モード |
| HTML 4.01 Transitional（URLなし） | 互換モード | 互換モード | 互換モード |
| HTML 4.01 Transitional（URLあり） | 標準モード | 標準モード | 標準モード |
| XHTML 1.0 Strict（URLなし） | 標準モード | 互換/標準※ | 標準モード |
| XHTML 1.0 Strict（URLあり） | 標準モード | 互換/標準※ | 標準モード |
| XHTML 1.0 Transitional（URLなし） | 標準モード | 互換/標準※ | 標準モード |
| XHTML 1.0 Transitional（URLあり） | 標準モード | 互換/標準※ | 標準モード |
標準モードと互換モードの違いも表にまとめましたので参考にして下さい。
| CSSソース例 | Netscape 6 | IE 6 | Mac版IE 5 | ||||
|---|---|---|---|---|---|---|---|
| 標準 モード | 互換モード | 標準 モード | 互換モード | 標準 モード | 互換モード | ||
| #をつけない色指定 | color: ff0000 | 無視 | #ff0000として表示 | 無視 | #ff0000として表示 | 無視 | #ff0000として表示 |
| 数値に単位がない場合 | margin-left: 100 | 無視 | 100pxとして表示 | 無視 | 100pxとして表示 | 無視 | 100pxとして表示 |
| 数値と単位の間にスペースがある場合 | margin-left: 100 px | 無視 | 無視 | 無視 | 100pxとして表示 | 無視 | 100pxとして表示 |
| キーワードを「"〜"」で囲った場合 | text-align: "center" | 無視 | 無視 | 無視 | centerとして表示 | 無視 | centerとして表示 |
| text-alignで、ブロックレベルの要素をセンタリングするか | text-align: center | しない | しない | する | する | しない | する |
| margin: autoで、ブロックレベル要素をセンタリングするか | margin: auto | する | する | する | しない | する | する |
| ブラウザ標準の文字サイズは「medium」と同じか | font-size: medium | 同じ | 同じ | 同じ | smallと同じ | 同じ | smallと同じ |
| widthとheightは、内容領域の幅と高さになっているか | width: 100px | 正常 | 正常 | 正常 | paddingとborderも含む | 正常 | paddingとborderも含む |
| img要素のpaddingをサポートしているか | padding: 50px | サポート | サポート | サポート | 未サポート | サポート | サポート |
うぅ〜今まで padding が思い通りにならないのも、センタリングされないのもこれのためか、と思いつつ・・・
Transitional に慣れ切ってしまっている僕にはこの仕様はなかなかもって辛いです。
最後にDOCTYPE宣言の例を書いておきます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">それにしても「いかにも過渡期」って感じですよね。