CSS スタイルシート雑技 No. 8
IE 6.x for Win の float による非表示バグ回避法
結論から言えば、親要素に幅の指定をすれば解決!です。
解説
float を使用したレイアウトを作ったとします。そして、要素に背景色や背景画像を指定すると、 IE 6.x for Win では、書かれている文字が消えたり、背景画像が消えたりしてしまうバグが発生します。
<style type="text/css">
div.parent{
background-color: #0000ff;
background-image: url('url');
}
div.childA{
/* このボックスには特に何も指定をしない */
}
div.childB{
float: right;
background-color: #ff0000;
}
div.childC{
clear: both;
}
</style>
<div class="parent">
<div class="childA">ボックス A</div>
<div class="childB">ボックス B</div>
<div class="childC">ボックス C</div>
</div>
このバグへの対処方法は、親要素に幅を指定する事で解決します。例えば次の通り。
<style type="text/css">
div.parent{
width: 100%;
background-color: #0000ff;
background-image: url('url');
}
div.childA{
/* このボックスには特に何も指定をしない */
}
div.childB{
float: right;
background-color: #ff0000;
}
div.childC{
clear: both;
}
</style>
<div class="parent">
<div class="childA">ボックス A</div>
<div class="childB">ボックス B</div>
<div class="childC">ボックス C</div>
</div>
ただし、親要素を100% に指定した場合、横スクロールバーが表示されてしまうのに注意が必要です。ですので、99%などにするのが解決策だと思われます。