MYCOMのCSS実装徹底検証! そこが知りたいInternet Explorer 7、非常に細かく調べてある。サンプルも多くてわかりやすいのだが、いろいろありすぎて勉強するにはちょっと大変。バグがまだありますよ、とは書いてあってもどう対応していいか書いてないし。IE7といってもbeta2の話なので、正式版では変わるかもしれないし。
そこで、ADPで一番アクセスを稼いでいるADP: floatレイアウトでつまづかないためのTipsを、「そこが知りたいInternet Explorer 7」の解法にもなるように、IE7対応もかねて改訂してみた。
いちばん大きな変更点は、上下マージンの話も追記したことだ。実は、上下マージンは怖いという認識は前からあったので、floatレイアウトでつまづかないためのTipsのサンプルでは初出時から各ボックスの上下マージンを使わないようにしていた。ずるいね。
これで、「そこが知りたいInternet Explorer 7」に書いてある、レイアウトで使うときに地雷となるフロートやボーダーのIE6・IE7のバグは、Peekaboo以外はすべて防げるようになる。Peekabooは自分が理解していないので保証はできないが、再現しないようなのでたぶん大丈夫なんじゃないかな（いいかげん）。
以下、細かい話。
(2)02-01 XML宣言によって表示モードが変わる問題を修正
XML宣言があろうがなかろうが、どっちでも同じ見た目になる。
(11)04-01 横幅や高さの指定で上下マージンの処理が変わる問題[未修正]
はじめに全称セレクタでmargin, paddingを0にすれば問題ない。
(12)04-02 横幅や高さの指定で背景の範囲が変わる問題[未修正]
borderは使わないって言ったでしょ。
3ピクセルずれる話とたぶんPeekabooの話。レイアウトで使う場合は、右側のボックスもwidthとfloatを指定すればいい。Peekabooの話はよくわからない（苦笑）。
(16)05-02 ボックスサイズ算出時のフロートの除外の問題
横幅や高さを指定した要素内のフロート要素が除外されない問題[未修正]については、footerをcontainerに含ませて、Mozilla Firefoxも同じ見た目にすればいい。
回り込ませた要素の下マージンの挿入位置の問題［未修正］は、レイアウトで使う場合は、右側のボックスもwidthとfloatを指定すればいい。
フロート要素の上下マージンがなくなる問題[未修正]、フロート要素と隣接する要素のマージン相殺の問題[未修正]、フロート要素の下マージンがなくなる問題[未修正]は、レイアウトのためにボックスをfloatで並べるときに上下のmarginは使わない、で一網打尽。
回り込みを解除した要素内の上部に余白が挿入される問題[未修正]は、footerにwidthをつければpaddingの高さが正常に戻る。
親要素の横幅に納まらない要素の回り込みが解除される問題[未修正]は、右側のボックスもwidthとfloatを指定すればいい。
複数の要素にfloatを指定したときの表示位置に関する問題[未修正]は、複雑なことはしないことで対応（笑）
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/574
５年前に作りぱっなしにしていたHPをリホームすることになって、唖然！ボーゼン！遠くから見ていた”CSS”の森がこんなにも深ぁい森だったとは・・・。IEなんて嫌いだぁ！！何箇所か読ませていただいて解ったことは、「一からやり直し」って事です。かなり参考になりました。しかし、５年のブランクはキツイなぁ・・・・。
かびんさん、ありがとうございます。CSSの対応状況（ブラウザの対応と、ADPのようなTipsサイトでの説明）は以前と比べ（れば）かなりよくなってきました。たしかに深ぁい森ではありますが、目的地にたどりつけずあきらめてしまうケースも減っていると思います。ぜひぜひ迷い込んでみてください。