IE6で、直前にあるボックスのmarginを引き継いでしまうバグ

皆様元気にIE8対策してますか？

「まだIE8の浸透率低いだろうし、別にいいかも・・・」

とか思ってしまいます、私が。

でも、IE6に比べると全然いいんじゃないかなって気もします。





よく、リストなどをfloatさせて横並びにするCSSのテクニックがあります。

私もメニューだったり、更新履歴だったりのところで使ったりするものなのですが、このボックス要素をfloatさせるというところに予想外のバグが潜んでいたりします。



たとえば、こんな感じです。

html, body,
h1, h2, h3, h4, h5, h6, a, p, addres,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form,
fieldset {
margin: 0;
padding: 0;
border: none;
font-style: normal;
font-weight: normal;
font-size: 100%;
list-style-type: none;
}
#container {
width: 700px;
}
h1{
width: 700px;
height: 30px;
margin-bottom: 20px;
background-color: #900;
color: #fff;
}
.date_list dt {
float: left;
width: 100px;
height: 30px;
margin: 0;
background-color: #090;
color: #fff;
}
.date_list dd {
display: inline;
float: left;
width: 600px;
height: 30px;
margin: 0;
background-color: #009;
color: #fff;
}

<div id="container">
<h1>これはタイトルです。</h1>
<dl class="date_list">
    <dt>○月×日</dt>
    <dd>これはダミーです。</dd>
</dl>
<dl class="date_list">
    <dt>○月×日</dt>
    <dd>これはダミーです。</dd>
</dl>
<div class="text_area">
    これはダミーです。<br />
    これはダミーです。<br />
    これはダミーです。
</div>
これはダミーです。
</div>

これをFirefoxやIE7で見ると、意図したとおりになります。




ですが、IE6では意図していないところに隙間ができてしまいます。








どうも、直前にmarginを持ったボックスがあると、そのmarginを引き継ぐようです。

引き継ぐのは、margin-bottomの値のみ。
ちなみに、clearfixを使うと悪化します。
試してみたclearfixは、
clearfixでfloatを解除 – d-spica
↑のもので試してみました。
（IE6で時々、clearfixの高さが0にならないんですよね・・・その辺は未だなぞ）


なので、
「直前のmarginを引き継ぐのなら、marginが0の子を入れてあげればいいじゃない」
ってことで、h1タグの直後に

<div style="height: 0px; overflow: hidden;"></div>

を挿入。
すると、正しく表示されるようになりました。
もっとスマートな方法があればいいんですけどね。