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

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

イメージ

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;」を指定してみる。
    →なんかよくわからないけど直った! というケースがちょくちょくあります。

それでも手強い IE6

というわけで、よっぽど複雑なレイアウトでない限りは IE6 対応もそれほど難しくないのですが、個人的には hasLayout の値が true だった場合にのみ発生するバグが、いまだにちょっと面倒です。

IE6 チクショー! なんて仕事中に呟くのも今年が最後になるといいですね。来年からは IE8 チクショー! が口癖になるかもしれません。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ