【CSS】CSSレイアウト時のIE6対策まとめ

HTML&CSS

2010.04.20

イメージ

Adobe の CS5 はなんか凄そうですね。「でもお高いんでしょ？」「ハイ、とても！」
いま会社で使っているアプリは「Macromedia」の Dreamweaver8 と Fireworks8 です。結構バリバリ制作作業していますが、別に不便に感じてないしなー、と思っている sakai です。自宅では Dreamweaver4 と Fireworks4 です。エヘン。

世間では HTML5 や CSS3 の話題も増えてきた今日この頃ですが、実務では相変わらず IE6 との格闘が続いています。
ただ、長年さんざん IE6 対策に取り組んできたこともあり、今ではそれほど IE6 を意識してコーディングすることもなくなりました。

今回は IE6 をターゲットに含めた CSS レイアウトで気をつけたい点をまとめました。
基本ですが、おさらいまで。

大前提

大前提として、IE6 は標準準拠モードにします。

DOCTYPE 宣言（URL 表記を含む）を省略しない。
XHTML の場合、XML 宣言は省略する。

CSS レイアウト時の注意

以下の 5 点に気をつければ、IE6 でも概ね正常にレイアウトできます。

よく使う要素は「zoom:1;」をデフォルトで指定して hasLayout の値を true にしておく。
→hasLayout が false であることによって発生する IE 固有のバグのほとんどがこれで回避できます。
float する要素には「display:inline;」をセットで記述。
→float した要素の margin が 2 倍になる、という有名なバグが回避できます。
float する div 要素と、全体を囲む div 要素には width を指定する。
→なんかカラム落ちする～という時はこれで一発解決することが多いです。
画像に変な隙間ができる、と思ったら対象の img 要素に「vertical-align:bottom;」。
→画像周辺の変な隙間がなくなることが多いです。
よくわからないけど、何故か表示が崩れる場合は、とりあえず怪しい要素に「position:relative;」を指定してみる。
→なんかよくわからないけど直った！というケースがちょくちょくあります。