InternetExplorerで、clearプロパティを指定したボックス上部の余白発生を防ぐ

こんにちは。
ちょっといきなり上級編ぽい感じですが、順不同で、思いつくまま書いて行きたいと思います。

書く順番が多少でたらめでも、長く続けられれば、いずれちゃんとそれなりに、内容が充実してくるんじゃないか、と楽観的に思っています。うまくいけば。

ということで、今回のテーマは、
「IE6、7で、clearプロパティを指定したボックス上部の余白発生を防ぐ」です。

IE6.0、7.0では、Clearプロパティを指定したボックス上部にわずかな余白が発生してしまうというバグがあります。
バグをふせぐためには、clear: bothで回りこみを解除したボックスに、幅を指定する必要があります。


#contents{
clear: both;
width: 100%; /* for IE6,7 */
}

コンテンツのあとに来るフッターエリアにも必ず指定しておきましょう。

#footer{
clear: both;
width: 100%; /* for IE6,7 */
}

ーーーーーーーーーーーーーーーー

IE6には、CSSを正しく解釈できないバグが非常に多いのですが、そのため僕自身もさんざん泣かされました。
さまざまなバグがあり、回避する方法もあるのですが、それらをすべて覚えておくのはけっこう大変です。
調子良く作業を進めていると、ついうっかり忘れてしまったりします。

サイト制作においては、まだまだIE6を完全に切り捨てられないので、IE6対策用のハック技を、いつでも参照できるようにしておくと便利です。

当ブログで継続的に書いて行くつもりですので、一つのリファレンス的な存在にしてもらえたらと思います。