この記事はアピリッツの技術ブログ「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 |
