IE6で背景が表示されない際にチェックすること

カテゴリ:IEのCSSの問題を回避する技 2009年2月 4日 23:44

さて、今回はやや趣向を変えて IE6 に絞って話をしたいと思います。
先日、久々に IE6 で自分のブログを見たらなんだか微妙に変な感じに。n

よく見てみたら、各タイトル部分の背景が所々表示されていませんでした。
この「背景が表示されない」というバグ、IE6 では時折見かけます。
以前書いた peek-a-booバグ というのもそのひとつ。n

今まで自分が経験した中で、この背景が表示されない現象を回避したものをいくつか書いてみようと思います。n

clearfix を使う

これは IE6 だけに限った話ではありませんが、float を使用してレイアウトをしていると遭遇する問題です。
子要素がすべて float していると親要素は正常に高さを判別できません。そのため、まるで背景が消失したかのように見えてしまいます。
これの解決には clearfix というハックを用いて対処します。n

なぜ clearfix を使うと背景が表示されるのかについては、初心者が陥りそうなCSSの7の間違い で詳しく説明しています。n

背景が表示されない要素に「zoom: 1;」を指定

zoom は、IE の独自プロパティであり、さらに IE に実装されている hasLayout の値を true にしてくれるプロパティです。
この hasLayout 、該当要素がレイアウト(ボックスモデル?)を持っているかどうか、を判定するもので、これが true になると高さや幅、marginなどの値が適用されるようになります。n

なので、CSSの解釈でFirefoxなどのモダンブラウザと比べてなんか違うな、と思ったらとりあえず指定してみると色々解決するかもしれません。n

背景が表示されない要素に「position: relative;」を指定

IE6の場合、ネガティブマージン(マイナス値の margin)を使うと時々変な挙動をすることがあります。
そのひとつとして背景が表示されない、というものがあります。
これ、まさに自分のブログで起きた現象でした;n

しかも、すべて同じ class の要素なのにもかかわらず、背景が表示されるものと表示されないものがあるのが厄介でした。
よくよく見てみたら、margin-left にマイナスの値を設定していたので、もしや、と思って position: relative を指定してみたところ、正常に背景が表示されました。n

また、これとは別にネガティブマージンを指定した要素内に画像がある場合、本来表示されるべき場所からマイナス方向に移動した分が切れる(本来表示されるべき場所でマスクされた感じ)という現象があります。n

これも同様にして、画像の親要素に対して position: relative を指定することで正常に表示されるようになります。n

この記事のカテゴリー一覧を見る⇒IEのCSSの問題を回避する技

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/118