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

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは。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