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