低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

IE6.0後方互換モードのまとめ

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点に気をつけてコーディングを行いましょう。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ