CSS『クロスブラウザ』〜IE6の後方互換モードを攻略する6つのポイント

IE6の後方互換モードを攻略

クロスブラウザを目指すためには適切なレンダリングモードをDTDによって採用させることから始めました。
「firefoxとIE6での表示の違いをCSSで統一する」
その上でIE6の後方互換モードの表示が標準準拠モードの表示と同じになるように工夫していきます。
まずはCSSハックは使わずに攻略していきましょう。

ボックスモデルの攻略

ボックスモデルとはブロックレベル要素が含む内容（たとえばp要素）、border、padding、marginで構成される矩形領域の概念のことです。

• margin・・・他の要素との余白。背景は常に透明で、親要素の背景が透過する。


• border・・・marginとの境界線。


• padding・・・コンテンツとborderの間スペース。当該要素の背景となる。

文章で説明するより図をご覧いただいた方が解りやすいでしょう。

上の図がボックスモデルの概念です。
このボックスモデルの解釈がIE6の後方互換モードは標準準拠モードと違います。
たとえば以下のようなボックスモデルを作るとします。

div#contents {
width : 300px;
margin : 20px;
padding : 20px;
border : 5px;
}

標準準拠モード、つまりfirefoxなどでは「width : 300px」はcontentsに採用され、ボックスモデルの幅は以下のようになります。
width : 300px(contents)+margin : 20px+padding : 20px+border : 5px = 345px

ところがIE6の後方互換モードではwidthの300pxにpaddingとborderを含めてしまいます。
つまりcontentsの幅はwidth : 300pxからpadding : 20pxとborder : 5pxを引いた240pxになってしまうのです。
width : 300px(padding : 20px、border : 5pxを含む)+margin : 20px = 320px

上記の例でいえば25pxのズレが発生します。
このズレがレイアウトの崩れを起こす原因になっています。
この例ではwidth（幅）でしたが、height（高さ）でも同じ事がいえます。

解決策として、

• widthを指定した要素には、左右のborder、左右のpaddingを指定しない。


• heightを指定した要素には、上下のborder、上下のpaddingを指定しない。

こうすれば標準準拠モードもIE6の後方互換モードも表示は同じになります。
ズレが生じる原因となるborderやpaddingを指定しないのですから当然ですね。

floatレイアウトを攻略

ページを複数カラムにレイアウトする時などに使うfloat。
このfloatとmarginを同時に使うと指定した時、marginの値が倍になるというバグがIE6の後方互換モードにあります。
floatを使って２カラムのレイアウトを作りfirefoxではキチンと表示されるのに、IE6では片方のカラムが下にすとんと落ちてしまう事があります。

div#contents {
float : left;
width : 200px;
margin-left : 10px;
}

上の例では幅200pxのボックスが左端から10pxのところに配置されるはずですが、IE6の後方互換モードではmarginの値が倍の20pxになってしまいます。
その結果左端から20pxのところにボックスが配置されます。

解決策としては

• 左floatさせた要素には左marginを「0」にする。


• 右floatさせた要素には右marginを「0」にする。

これも先ほどのボックスモデルの時と同じように、バグの原因となるものは初めから指定しないようにするのです。
こうすれば標準準拠モードと同じように表示されます。

フォントサイズの攻略

IE6の後方互換モードはfont-size: small; と font-size: 100%; が同じ大きさになります。
標準準拠モードではfont-size: medium; と font-size: 100%; が同じ大きさになるため文字の大きさが違ってしまいます。

この解決策は簡単です。
fontサイズは「%」か「px」で指定する。
これだけです。

ページのセンタリングの攻略

ページ全体をセンタリングするにはbodyの子要素の左右marginを「auto」にしますが、IE6はこの方法ではセンタリングされません。

body {
margin : 0;
padding : 0;
}

#doc {
margin : 0 auto;
}

そこでbody要素に「text-align : center;」と指定します。
これだけだと全ての子要素がセンタリングされてしまいますので、すぐ下の子要素で「text-align : left;」と指定しなおします。
こうすればページ全体がセンタリングされて表示されます。

body {
margin : 0;
padding : 0;
text-align : center;
}

#doc {
margin : 0 auto;
text-align : left;
}

背景画像を攻略

firefoxやsafariでは背景に指定した画像がきちんと表示されるのにIE6では背景画像が表示されないことがあります。
こういう時はCSSを確認してみてください。

background:url(../image/example.jpg) no-repeat top left;

上記のようにまとめて書いていませんか？
上記の様に書くとIE6では背景画像が表示されません。

background-image : url(../image/example.jpg);
background-repeat : no-repeat;
background-position : top left;

この様に分けて記述すると背景画像が表示されるようになります。

透過画像を攻略

IE6では透過pngが透過されません。
本来透過されるべき部分が水色で表示されてしまい見た目も美しくありません。
残念ながらIE6で透過画像を使いたいならgifを使うしかないようです。
IE6でも透過png をきれいに表示させる方法がいくつかあるようです。
このブログでも透過png を使ってタイトル部を再構築してみました。
IE6 でも透過png がきちんと透過されて表示されています。
IE6でも透過png を表示する『AlphaImageLoader』

とりあえずこれくらい気を付ければ大丈夫だと思います。
また思い当たることがあれば追加していきます。

お勧め書籍

正しい仕様解説、実践的なCSSテクニックまで網羅しています。
Web標準を実践したいならお勧めの一冊です。

この記事を読んだ人はこんな記事も読んでいます

firefoxとIE6での表示の違いをCSSで統一する

firefoxでもIEでも同じ表示を実現させたい〜CSSハック

IE6でも透過png を表示する『AlphaImageLoader』