2008
05
2008
04
2008
03
2008
02
2008
01
2007
12
2007
11
2007
10
2007
09
2007
08
2007
07
2007
06
2007
05
2007
04
2007
03
2007
02
2007
01
2006
12
2006
11
2006
10
2006
09

<< TOPへ戻る

エントリー アーカイブ

HTML+CSSコーディング [2007/04/09]

CSSで背景画像を使用した際にその上の文字が消える件

背景画像を使用したCSSデザインでページを組んでいると
IE6、WindowsXpSP2、かつ特定のPC(特にIBM系のPC)で背景上にある文字が
消えてしまう現象が発生したらしく早速調査してみた。

発生原因としてまず障害の切り分けを行う。

●CSSで定義した背景画像をコメントアウトしてみた
→ きちんと文字が消えずに表示された。


●背景画像の指定を戻し、背景画像を指定しているブロック以下のタグに以下のような指定をしてみる。

background-color: transparent; /* 背景カラーを透明化 */

→ 状況は変わらず。文字が消えたままになる。


現象としては、出たり出なかったりで、他のPCだと同じIE6を使用しているにもかかわらずきちんと表示されている。
ちょっと万策尽きかけたところ、同じような現象はないか検索すると、どうやらこの現象はFloat指定されたブロックの幅指定関係で発生するらしい。
で、以下の設定をしてみた。

●背景画像を指定しているブロックに幅指定をする。

width: 540px;

→ 今度はうまく表示された。


■今回のキモはこれです。

『 背景画像を指定したブロックは必ず幅指定をする 』

これを守ればこのバグに遭遇しなくて済みます。

by okuyama 2007年04月09日 20:58 トラックバックTrackback (0) コメントComments (0) このエントリーを含むはてなブックマーク
RSSATOM

コメントを投稿

 

Trackback