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 チクショー！ が口癖になるかもしれません。
