HTML5でIE9以下で背景画像が表示されなくなる時の対処方法

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

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

背景画像が表示されないというのは下の画像の下のボックスような感じです。クリックで大きい画像が見れます。
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; と背景色の指定を書くようにしたほうが安全のようです。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS