背景画像を使用したCSSデザインでページを組んでいると
IE6、WindowsXpSP2、かつ特定のPC（特にIBM系のPC）で背景上にある文字が
消えてしまう現象が発生したらしく早速調査してみた。
発生原因としてまず障害の切り分けを行う。
●CSSで定義した背景画像をコメントアウトしてみた
→ きちんと文字が消えずに表示された。
●背景画像の指定を戻し、背景画像を指定しているブロック以下のタグに以下のような指定をしてみる。
background-color: transparent; /* 背景カラーを透明化 */
→ 状況は変わらず。文字が消えたままになる。
現象としては、出たり出なかったりで、他のPCだと同じIE6を使用しているにもかかわらずきちんと表示されている。
ちょっと万策尽きかけたところ、同じような現象はないか検索すると、どうやらこの現象はFloat指定されたブロックの幅指定関係で発生するらしい。
で、以下の設定をしてみた。
●背景画像を指定しているブロックに幅指定をする。
width: 540px;
→ 今度はうまく表示された。
■今回のキモはこれです。
『 背景画像を指定したブロックは必ず幅指定をする 』
これを守ればこのバグに遭遇しなくて済みます。
トラックバックURL:http://www.mercury-sys.com/cgi-bin/mt/mt-tb.cgi/479
