表示モードによる解釈の違い

一般的なブラウザには、「標準モード」と「互換モード」という2つの表示モードが備わっています。これは、DOCTYPE宣言の記述にURIを含めるかどうかによって、自動的に切り替わる仕組みになっています。

• 詳しくは「DOCTYPE宣言」をご覧ください

この表示モードの違いは、スタイルシートの解釈にも影響を及ぼすケースがあります。以下の項目では、デザインに影響を及ぼすと思われる代表的な「解釈の違い」をご紹介します。

※動作確認に使用したブラウザは、IE 7、Firefox 2、Opera 9 です。バージョンによっては動作が異なる可能性があります。

ボックスのサイズ（width、height）を指定する場合、標準モードと互換モードでは次のような解釈の違いがあります。

※この解釈の違いはIEで発生します。FirefoxとOperaでは、どちらのモードでも「標準モード」側の解釈となります。

• 標準モード … width と height で指定するサイズには、境界線やパディングを含みません。
• 互換モード … width と height で指定するサイズには、境界線やパディングが含まれます。

例えば、width: 100px と padding: 10px を指定した場合は、ボックス全体の幅は次のようになります。

• 標準モード … ボックス全体の幅は120pxになります。
• 互換モード … ボックス全体の幅は100pxになります。

※標準モードでは、width: 100px に padding: 10px が両サイドに加わるので、ボックス全体の幅が120pxになります。

ブロックレベル要素をセンタリングする場合、標準モードと互換モードでは次のような解釈の違いがあります。

※この解釈の違いはIEで発生します。FirefoxとOperaでは、どちらのモードでも「標準モード」側の解釈となります。

• 標準モード … 左右のマージンに auto を指定するとセンタリングされます。（同時にボックスの幅を指定しておく必要があります）
• 互換モード … 左右のマージンに auto を指定してもセンタリングされません。

※互換モードでセンタリングさせたい場合は、親ボックスに text-align: center を指定します。

フォントサイズを数値ではなくキーワードで指定する場合、標準モードと互換モードでは次のような解釈の違いがあります。

※この解釈の違いはIEとOperaで発生します。Firefoxでは、どちらのモードでも「標準モード」側の解釈となります。

• 標準モード … medium が標準の文字サイズと一致します。
• 互換モード … small が標準の文字サイズと一致します。

例えば、font-size: medium を指定した文字サイズで比較した場合、「標準モード」では標準のサイズと一致するのに対して、「互換モード」では標準より一段階大きいサイズで表示されることになります。