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

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

この表示モードの違いは、スタイルシートの解釈にも影響を及ぼすケースがあり、スタイルの指定内容によっては表示のされ方が変わってしまう場合があります。

※互換モードではうまく表示されるのに標準モードではレイアウトが崩れる、IEではうまく表示されるのに別のブラウザでは崩れてしまう、といった症状は、この解釈の違いが影響している場合が多いようです。

以下の項目では、デザインに影響を及ぼすと思われる代表的な「解釈の違い」をご紹介します。

※動作を確認したブラウザは、IE6、Opera8、Firefox1、Netscape7です。バージョンによっては、動作は異なる可能性があります。

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

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

標準モード … widthとheightで指定したサイズには、枠線やパディングを含みません。
互換モード … widthとheightで指定したサイズには、枠線やパディングを含みます。

例えば、width: 100px と padding: 10px が指定されたボックスの場合、ボックス全体の横幅は次のように変化します。

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

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

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

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

標準モード … 左右のマージンにautoを指定するとセンタリングされます。
互換モード … 左右のマージンにautoを指定してもセンタリングされません。

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

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

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

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

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