IE6.0後方互換モードとは
IE6.0後方互換モードとは、古いバージョンの独自仕様または誤った解釈で表示するモードのことです。
通常、この後方互換モードを意図して使うことはあまりないと思いますが、XHTMLの正しい文法としてXML宣言をするとIE6のバグ(※1)で後方互換モードになってしまいます。
- ※1．正しくは、XML宣言に限らずDOCTYPE宣言の前に、テキストなどが入ると後方互換モードになってしまいます。
IE6後方互換モードと標準準拠モードの違い
後方互換モードでは以下のようになります。
- ◇margin: auto が適用されない
- text-align でブロック要素も左・中央・右寄せが出来ます。注意点としてはスタイルプロパティが子孫要素へ継承されてしまうので直後の子要素に text-align を指定し直しましょう。
- ◇ボックスモデルの幅を求める計算が違う
- 後方互換モードでは、width or height の値がそのまま大きさになります。
標準準拠モードでは width or height + padding + border という計算式のため、よくブラウザによってレイアウトが崩れているときの原因となっています。
対処法としては、width or height と padding、border を一緒に指定しないようにするか、CSSハックを使いましょう。 - ◇img に padding が適用されない
- 単純に img の周りに余白を空けたいだけなら margin を使いましょう。img の周りに余白を空けて border を表示させたい場合は親要素を作りそれに指定する必要があります。
- ◇インライン要素に width or height が適用される
- Firefoxなどモダンブラウザで表示すると崩れてしまいますので、インライン要素には width or height は指定しないようにしましょう。
- ◇文字サイズが一段階大きくなる
- 例えばスタイルシートで”font-size: small”と指定すると”font-size: medium”と解釈されてしまいます。条件付コメントまたはCSSハックを使いIEには一段階小さいサイズを指定します。
IE6後方互換モードでコーディングをする場合は、この5点に気をつけてコーディングを行いましょう。
