昨日、と言うか今日の早朝のこと、また突然 IE がおかしな表示をし始めた。
「h1，h2 要素の背景画像が消える、幾つかの li 要素の背景画像が消える」という症状。
一応、簡単に検索掛けてはみたが、それらしいものは見当たらなかったように思う。順位が下の方にあるのかも知りませんが、「Win-IE の未確認バグか？」と思いつつ、解決策を模索。
取り敢えず、height を指定することで解決に至る。
それで、解決したところで原因をあれこれ考えてみたわけですよ。
どうやら、以下の 4 つの条件が重なると起こるらしい。
（ある要素 A に指定した背景画像が消える場合を考える。）
- 要素 A を包含するボックス B が存在し、ボックス C に包含されている。
- 要素 A を包含するボックス C に { height: ***; } が指定してある。
- 要素 A を包含するボックス C に { position: relative; } が指定してある。
- { line-height: ***; } のみで高さを指定した要素 A に { background-image: url(***); } を指定。
今回はすぐに自己解決したので良かったんですが、この手の検索はキーワードが分かりにくい。何か良いバグ投稿用のフォーマットは無いものか…
一定のフォーマットで Web 上に置いてあれば、キーワードも限定され、該当するバグと解決方法がすぐに見つけられると思うんだけど。
今は検索するより、自分でイロイロ試す方が早い。
だから有名なバグ以外は殆ど知らないわけですが… まぁ、普段からバグが発生しやすいようなデザインやコーディングをしないので問題ないんですが、デザイン決定後に HTML の構造が変更になると今回のように知らないバグに遭遇するわけです。
しかし、やってくれるよ、IE も。
自分のサイトならともかく、お仕事となるとそう笑ってばかりもいられませんね。
PS. { display: none; } として印刷以外では表示されないように考えていたものを、Mac-IE のマージンや Win-IE の誤ボックスモデルを同時に解決するために空間に利用した。HTML の構造変更に伴い、なかなかトリッキーというか変なことをしている今日この頃。
コメントする