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

一般的なブラウザには、標準モードと互換モードという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 を指定します。

違いのサンプル

div要素に対して、width: 50%; margin-left: auto; margin-right: auto; を指定しています。標準モードではセンタリングされますが、互換モードではセンタリングされません。

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

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

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

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

違いのサンプル

font-size: xx-large ～ font-size: xx-small を指定しています。互換モードでは一段階大きいサイズで表示されます。