DOCTYPEスイッチの3つのモードについて

2009年7月18日 13:31 | 個別ページ

DOCTYPE宣言によってCSSのレンダリングが変わるのですが、以下の３つのモードがあります。

これらの違いを見ていきます。

仕様に則ったとおりにレンダリングされます。ここでいう仕様とはW3C標準仕様のことで、以下の仕様書のことを指します。

完全標準モードとほぼ標準モードの違いは1点だけです。

画像の表示に違いがあります。完全標準モードでは画像のvertical-alignプロパティの初期値はbaselineなのですが、ほぼ標準モードではvertical-alignプロパティの値はbottomとなります。

vertical-alignプロパティの値がbaselineであると、画像の下に空白が生じます。この理由は当blogの以下の記事を参考にしてください。

完全標準モードと後方互換モードにはかなり違いがあります。

最も知られているのはボックスモデルの違いです。ボックスにwidthとpaddingとborderを指定した場合、完全標準モードでは横幅 = width + padding + borderになるのに対し、後方互換モードでは横幅 = widthとなってしまいます。

その他にもいろいろあるのですが、量が多いのでここでは割愛します。以下のサイトなどを参考にしてみてください。

DOCTYPEスイッチによるモードの違いを表にしたものです。以下のサイトをご覧ください。また、同時に「表示モードごとの CSS 解釈検証表」も載っているので合わせて参考にしてください。