Unformed Building

IE 7以下で背景画像が表示されない場合の対処法

公開：
更新：

パーマリンク

IEで変な現象が起きてしまったのでメモ。
Internet Explorer 7以下で背景画像が表示されなくなるといったもの。
その原因となった部分と対処法。

背景が表示されなくなったページ

こういうページを作ってました。

背景画像が表示されなかったページ

このページの「タイトル」と書かれている部分ですね。
（実際に作ったページとは画像を変更しています）

この部分のHTMLとCSSは以下。

<div id="main">
  <div class="article">
    <div class="head">
      <h2>タイトル</h2>
    </div>
    <div class="body">
      <p>テキスト。テキスト。テキス...</p>
    </div>
  </div>
</div>
/* ここが表示されない */
#main .article .head {
  background: url(img/mainhead.png) bottom left no-repeat;
}

#main .article .head h2 {
  padding: 6px 50px 6px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

あと、このページにはEric Meyer Reset CSSを少しいじったものを使っています。
今回重要なのはこの部分。

body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

対処法

何で表示されないのか検索しても分からなかったのでTwitterで書いたところ、@GeckoTangさんが色々と見つけてくださいました。
ほんと、毎回ありがとうございます。

原因となった部分

最終的に、リセット用のCSSに書かれている1行を削除、または変更することで対処できました。
変更箇所は以下。

body, div, span, applet... {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; /* ここを削除 */
}

どうも* { background: transparent; }と同様のコードがあって、ショートハンドプロパティのbackgroundを省略ありで使った場合に背景画像が消えてしまうようです。
これを修正するにはbackground: transparentを削除するか、background-color: transparentと指定します。

該当要素部分のみ修正する場合

リセットCSSではなく、該当要素部分のCSSを変更して対処する場合です。
ここでは

#main .article .head {
  background: url(img/mainhead.png) bottom left no-repeat;
}

の部分になります。

ここのhasLayoutをtrueにしてやると、ちゃんと背景画像が表示されます。
具体的にはzoom: 1を指定してやるとかですね。
widthやheightを指定してもOKです。

また、borderを指定することでも解決します。

他にはbackgroundプロパティを省略せず、全部書くことで背景画像が表示されます。
今回の場合は

#main .article .head {
  background: #fff url(img/mainhead.png) bottom left no-repeat;
}

となります。
ただ、transparentではダメでした。

どうしてこういうことが起きるのかは分かりませんが、background: transparentを使う場合には注意が必要ですね。