IEでmargin-bottomがfloatした要素にも適用されるバグ

先日制作作業をしていたら出くわしたバグについてのメモ。

ボックスの中に、margin-bottomを指定した要素を配置していて、
その後続の要素がすべてフロートしていた場合、
margin-bottomがフロートしているボックスの下にmargin-bottomが発生し、
フロートボックス群と親ボックスの間にmarginができるというものです。

発生環境

• IE5.5
• IE6
• IE7

発生条件

• あるボックス内で、１つの要素（Aとする）以外がすべてフロートしている。
• 要素Aはフロートボックスよりも前に記述されている。
• 要素Aにmargin-bottomが指定されている。
• 要素Aの親ボックスに高さを指定しているか、
  displayをinlineやinline-blockにしている

以上の条件を満たすと、
要素Aに指定したmargin-bottomが、フロートしたボックスにも適用されてしまいます。
例を見る。
おそらく上記ページをIE7以下で見ると表示がおかしくなるのではないでしょうか。

フロートボックスにmargin-bottomが適用されないというバグは以前ご紹介しましたね。

どうしてもこの条件で余白を明けたい場合はpadding-bottomを使うしかなさそうです。
私の場合はpadding-bottomで解決できたのでよかったですが。

今まで出くわしたことのなかったバグだったのでIE標準モードだけでのことかと思ったのですが、
xml宣言をつけた互換モードでも同じバグが確認できました。

きちんと覚えておかねば!