floatとmargin-bottomのカンケイ

本日は超個人的CSSメモです。

今日、バイト先で作ったサイトの修正をしていたんですが、
どうも、IE6とIE7で、margin-bottomが適用されていないのを発見。
（SafariとかOperaでは全く確認しなかったので、IE特有のものかはナゾ。IE8だとOKだった。）

状況としては、

• floatしてるボックスに、margin-bottomを指定していた。
• floatしてるボックスの親ボックスに対して、position: relative;を指定した。
• floatしてるボックスの中に、position: absolute; bottom: 0; right: 0;　というスタイルを持ったボックスを入れた。

ら、絶対配置したボックスが、floatボックスの一番下のコンテンツにまるかぶりだった。

とりあえず、初めは何が原因なのか分からなくて発狂しました。
最終奥義CSSハックを使おうかとも思いましたが、
原因が分からないのは気持ち悪くて嫌だったので1時間くらい残業して作業をしてたら見事判明。

Firefoxではmargin-bottomが適用されていて、
そのマージンがきちんと空いて、その下に絶対配置ボックスが配置されていて良かったのですが、
IE6、7では全然マージンがきいてなかったんです。

というわけで、floatボックスのmargin-bottomを消し、
floatボックスの親にpadding-bottomを指定してみごと解決できました。

よかった。

原因はあってるかわからないけれど、
これからfloatボックスにmargin-bottomは指定しないことにします。

メモ終わり。