UPDATE 2010年6月4日
ブロック要素の中身がどんどん左にズレるIE6のバグ
自分ではコーディングに関しては、ブラウザのバグはひと通り経験したと思ってました。けどまだまだ甘かった。IE6にはまだこんなバグがあったとは。。。
ご覧の通り、2つ目以降のボックス内の要素が、どんどん左にズレていきます。
(「どんどん」ズレるというのがすごい。そのうち見えなくなるからね。)
これは、ブロック要素を入れ子(2重)にして、border-leftとpading-bottomを外側のブロックにしていしたときに、上記のような症状が起きてしまいます。
ソースはこんな感じ。
<div class="redBox"> <p> 赤線が入ったボックスです。 </p> </div> <div class="blueBox"> <p> 青線が入ったボックスです。 </p> </div> <div class="greenBox"> <p> 緑線が入ったボックスです。 </p> </div>
div.redBox { border-left: 10px solid #ff0000; margin-bottom: 10px; padding-bottom: 10px; background: #eeeeee; } div.blueBox { border-left: 10px solid #0000ff; margin-bottom: 10px; padding-bottom: 10px; background: #eeeeee; } div.greenBox { border-left: 10px solid #00ff00; margin-bottom: 10px; padding-bottom: 10px; background: #eeeeee; }
これを解決するには、
1.border-leftとpadding-bottomの組み合わせをやめちゃう。
2.または、外側のブロックに横幅を指定する。
の2通りの方法が現実的ではないかと思います。
border-left以外のborder-topを指定しても解決しますが、これではデザインを再現できないですし、無意味でしょう。
このミニマムズブログでIE6でのアクセスは全体の3%くらい。そろそろいいかな。
CATEGORY (x)html・CSS COMMENT (1)
この記事へのコメント(1)
gin 2011年2月25日 at 11:49 AM
非常に助かりました!ありがとうございます!