見え方が違う!後方互換モード(!DOCTYPE スイッチ)

メモ:

旧来のブラウザはCSS対応の実装状況が異なっていたため、 それを避けて個性を出すためTable要素を駆使してホームページをデザインしていました。

CSSが普及してきた現在、インターネット上には旧来からの定義と違うCSSの仕様や 標準化されたCSSを使用したホームページなど様々なページが存在しています。

この違いを吸収するため、各ブラウザ(IE,FireFox,Opera)はHTMLの文書型宣言(DOCTYPE)によって 表示方法を切り替えています。 この表示方法の違いを標準モード、後方互換モードといいます。

表示の違いとは、例えばtext-alignでブロック要素をセンタリングできるかどうかや margin:autoが有効かどうか等様々な違いがあります。

HTMLの主な文書型宣言と表示モードの関係を次の表に示します。

文書型宣言 Gecko系 MacIE5 IE6 Opera7.x
なし、HTML2.0、HTML3.2 互換モード 互換モード 互換モード 互換モード
HTML 4.01Strict(URLなし) 標準モード 互換モード 標準モード 標準モード
HTML 4.01Strict(URLあり) 標準モード 標準モード 標準モード 標準モード
HTML 4.01Transitional(URLなし) 互換モード 互換モード 互換モード 互換モード
HTML 4.01Transitional(URLあり) 標準モード 標準モード 標準モード 標準モード
XHTML(XML宣言なし) 標準モード 標準モード 標準モード 標準モード
XHTML(XML宣言あり) 標準モード 標準モード 互換モード 標準モード

文書宣言をすることでブラウザによる違いを減らすことができユーザーに優しい ホームページを作成することができます。

参考:Internet Explorer 6 における CSS の拡張