2006年03月21日（火） コメント:2 トラックバック:1
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。
- フォントサイズ関係
font-sizeは%かpxで指定する。
- ボックスモデル関係
widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。- （ブロックレベル要素を内包するボックスには
paddingを指定しない。） - body要素には
borderやwidthを指定しない。
- 視覚整形モデル関係
- フロートのコンテナブロックには
widthを指定する。 - 左フロートの左
marginは0にする。右フロートの右marginは0にする。 - フロートに後続する通常フローでかつ
clearしていないブロックボックスにはwidthもheightも指定しない。 clearするボックスの上marginは0にする。clearするボックスには同時にwidthも指定する。- 絶対配置要素のコンテナブロックには
widthを指定する。 - 絶対配置要素の位置指定は
topとleftまたはrightとbottomで行う。leftとrightやtopとbottomを同時指定しない。 - 絶対配置要素のコンテナブロックはその要素の直接の親要素にする。
overflowを使うときは同時にwidthやheightを指定する。
- フロートのコンテナブロックには
とりあえずこれくらいのことに気をつけていれば、そこそこ大丈夫です。その他細かいバグはケースバイケースで対処するしかないです。 「CSSハック」はこれらの条件を守れない場合の最後の手段として使ってください。 あとは仕様を正しく理解しているかどうかですね（それが一番大変だったりしますが）。
コメント（2件）
IE対応の定石、勉強になりましたｍ(_ _)ｍ
参照元のサイトは「なんでうまくいかないんだああ！」と詰まったときにお世話になっていますが、2chが有益無益含めた情報のるつぼであることを実感します。
＞フロートに後続するボックスの幅がフロートに合わせて短縮される
いわゆる「IE専用」ブログに、この手の表示状態をよく見かけるのですが…
正常な表示の方が一見変に見えますが、先日みりばーるさんが書かれた「floatは回り込みではない」を読めばよくわかりますね。
最近アップしたテンプレでは、記事をテーブル風にfloatさせたレイアウトを作るところで
「widthとpaddingを同時に指定できない」「floatと同じ方向にmarginを指定できない」という二つの縛りにかなり悩まされました。「FC2BLOG Designers」でやっていなかったら投げ出してたかもしれません（＾＾；
やっぱりCSSの知識を深めるには、いろいろなレイアウトに挑戦して経験を重ねるのが大事なんですね。
＞floatと同じ方向にmarginを指定できない
実は左フロートがふたつ連続しているなら、後ろの左フロートの左marginは指定値どおりになります。
また、フロートにdisplay:inlineをつければ何故かバグが回避できるようですよ。
仕様9.7 'display'，'position'及び'float'の間の関係によれば、フロートのdisplayは強制的にブロックレベルになるので弊害もないと思います。
＞いろいろなレイアウトに挑戦して経験を重ねる
そうですね、FC2ブログに来るまではネガティブマージンをやろうなんて思いませんでしたし。