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

Category : CSS

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; を指定してやるとかですね。
widthheight を指定しても OK です。

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

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

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

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


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

Leave a Reply