memocarilog

先日HTML5でコーディングしていた際に、IE9以下で特定の要素に指定した背景画像が表示されなくなるという出来事がありました。今後の為にどういう条件で起こるのかを検証してみました。

背景画像が表示されないサンプル

背景画像が表示されないというのは下の画像の下のボックスような感じです。クリックで大きい画像が見れます。

サンプルのコード

htmlは以下のような感じです。単純にdivの中に section があって、その中に h1 と p タグがある状態です。背景が消えてしまうのは example2 のsectionです。

<div id="container">
<section class="example">
<h1>HTML5 IEバグの再現テストです</h1>
<p>略</p>
</section>

<section class="example2">
<h1>HTML5 IEバグの再現テスト2です</h1>
<p>略</p>
</section>
</div>

cssは HTML5 Reset Stylesheet（HTML5 Reset Stylesheet | HTML5 Doctor）+以下のコードです。

#container{
	width: 640px;
	margin: 0 auto;	
}
.example h1,.example2 h1{
	margin-bottom: 30px;
}
.example p,.example2 p{
	line-height: 1.5;
}
.example{
	width: 580px;
	background: url(back.png) ;
	margin: 50px 0;
	padding:60px 30px;
	box-shadow: 1px 1px 5px #ddd;
}
.example2{
	background: url(back.png);
	margin: 50px 0;
	padding:60px 30px;
	box-shadow: 1px 1px 5px #ddd;
}
</pre>

原因

上記のサンプルで現象を再現してみた結果、section要素に横幅を指定いなくて（その親要素には指定あり）、HTML5 Reset Stylesheet（HTML5 Reset Stylesheet | HTML5 Doctor）の 基本要素のbackgroundをtransparentとしている場合に起こるようです。（26行目付近の指定）

対処方法

回避方法としては、section要素にwidthを指定するか、background:transparent;となっている所をbackground-color:transparent;とすれば解決しました。
下記の参考記事の、backgroundプロパティを省略せずにすべて書くという方法でも直りました。

widthの指定がなくて background:transparent になっていると背景に指定した画像も透明にされてしまうという感じなのでしょうか？
その辺りはよく分かりませんが、 HTML5 Doctorのリセットスタイルシートを使う時は、background-color:transparent; と背景色の指定を書くようにしたほうが安全のようです。