2009/06/11

IE6で背景が出たり消えたりする件について

IE6で背景が出たり消えたりする件について
IE6で背景が出たり消えたりする件について

RSS

こんにちは。maiです。
cssでレイアウトを組んでいるとIE6とは日々戦いです。
今回は、スクロールしたりリロードしたりしたときに、
IE6だけ背景が表示されないことがあるという
めんどくさいバグ(通称いないいないばあバグというらしい)の対処法について。



このバグの原因は、該当する要素のhaslayoutがfalseになっていることのようです。
haslayoutとは平たく言うと、レイアウトに関する情報を持ってるか?ということで、IEがもっているプロパティです。
持っていればhaslayoutはtrue。持っていなければfalse。単純ですね。



なので、対処法としてはバグが起こっている要素のstyleにhaslayoutがtureになるプロパティ&値を書けばOKです。



haslayoutをtrueにするプロパティと値はいくつか組み合わせがありますが、
背景がでない…で困っているのなら一番無難なwidth又はheightの値を入れます。
ハックでIE6向けにwidth:1px;とか入れてもいいですが、
幅か高さを明示すればいいだけなので、
ハックを使わず素直にwidthかheightの値を入れることをお薦めします。



ちなみに私のケースだとbackgroundだけでしたが、borderでも同じ症状が出るみたいです。
backgroundやborderを使うときは面倒でもIE6のためにwidthを書いておいた方が幸せになれそうです。



この他にもIE6でレイアウトに問題が出たときはhaslayoutをtureにしてみるといいかもしれません。



★参考資料★
haslayoutをtrueにするプロパティと値って他にどんなのがあるのー?と気になる人もいると思うので、
参考までに載せておきます。
プロパティ 値
display inline-block
height any value
float left or right
position absolute
width any value
writing-mode tb-rl
zoom any value