iStudio 2|21 ロゴ

Extra

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%などにするのが解決策だと思われます。