0

IE6のCSSバグ

CSSでIE6だけ表示がずれるのはよくある話です。
ボックスの計算式がおかしいというのがもっとも一般的です。

今日ははまりまくったのは別のバグ。
ボックスを並べると中にあるテキストがどんどん左によってくるというもの。
みた感じ、タグのとじ忘れかと思うような症状ですが、これは立派なIE6固有のバグです。
そういえばブログか本で読んだことはあったけど、自分が実際にこのバグにぶちあたるとは思いませんでした。
というのも、このエラーがでる引き金は下記の3つがそろった時。

-「divの中にdiv」など、ブロック要素を2重にする
– 外側のブロック要素に、border-leftとpadding-bottomを定義する
– これらが繰り返される

するとpadding-bottomの値の分だけ左によっていきます。

padding-bottom:5px;

なら一つ目は問題ないけど2つ目は左に5pxずれます。
3つ目は左に10pxずれます。
ぱっと見、タグのとじ忘れかなと思うこのエラーは発見するまでが大変だった。
結局0pxならエラーがでないので0pxに書き換えて一件落着。
PHPやMTでHTMLを生成する際ループでボックスを繰り返しつくる場合は気をつけときましょう。

大阪のWEB屋です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です