IE9のみ、背景が縦に２回表示される

質問

質問よろしくお願い致します。
タイトル通り、IE9でのみ、背景画像が縦に２回連続して表示されてしまいます。
Macの全てのブラウザ、Win Chrome、Safari、Firefox、IE6～8では問題なくきちんと表示されます。
IE9だけなんです。。。

CSSは一部分、直接HTMLに記載していますが、外部CSS（commonで使用している方など）に書いても同じでした。

ソースは下記になります。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<div class="w1000 box_shadow" style="height:645px;background:url(images/bg1.jpg) left top no-repeat;">
<div class="w960">
<h3><img src="images/ttl1.png" width="800" height="500" alt="title1" class="p-top25" /><h3>
<p class="m-top30">
キャプションキャプションキャプション<br />
キャプションキャプションキャプションキャプションキャプションキャプションキャプション
<p>
</div>
</div>

<div class="w1000 box_shadow" style="height:300px;background:url(images/bg2.jpg) left top no-repeat;">
<div class="w960">
<h3><img src="images/ttl2.png" width="800" height="300" alt="title1" class="p-top25" /><h3>
<p class="m-top30">
キャプションキャプションキャプション<br />
キャプションキャプションキャプションキャプションキャプションキャプションキャプション
<p>
</div>
</div>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

2つ縦にブロックをおいていますが、１つだけだときちんと表示されます。
背景画像と内包内容違いで複数おくと、この現象がおきます。
position:relativeやzoom:1も試してみましたがダメでした。

具体的な表示内容は、下記のようになります。（わかりずらいの画像も添付します）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
高さ645pxでbg1.jpg背景が表示：内容カラ
ーーーーーーーーーーーーーーーーー
高さ645pxでbg1.jpg背景が再度表示：タイトル画像やキャプションが入る
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
高さ300pxでbg2.jpg背景が表示：内容カラ
ーーーーーーーーーーーーーーーーー
高さ300pxでbg2.jpg背景が再度表示：タイトル画像やキャプションが入る
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

原因や改善策などありますでしょうか？
どうぞ宜しくお願い致します。

回答No.2

ORUKA1951

HTMLがデザインのために書かれているので、実際何をされたいかがさっぱりなのですが、原因はブロックを二つに解釈されているのでしょう。ウィンドウ幅を様々に変えて試すと原因がわかるかも。

　その前に、示されたHTMLとキャプチャーでわからないところがあるのですが・・
<img src="images/ttl1.png" width="800" height="500" alt="title1" class="p-top25" />
と
<img src="images/ttl2.png" width="800" height="300" alt="title1" class="p-top25" />
の画像、あまりに大きいのですが、キャプチャ画像では小さな[ttl1画像]になっています。？？

お礼

ご回答ありがとうございます。
HTMLとキャプチャー内容が連動していなくて申し訳ありません。
こちらに投稿する為に、簡単に作成した画像だったので
HTMLのttl画像サイズと見た目が合わなくなっておりましたm（_ _）m

問題は解決しました。
本当に単純な事だったのですが、内側のブロックに入れている内容で
<h4>xxx</h4>があったのですが閉じタグにスラッシュが不足していました。。。

他の全ブラウザ大丈夫でIE9だけダメだったので、ソース確認をする前にてんぱり投稿してしまいました。
これからは投稿する前にまずはコードチェックからはじめます。

ありがとうございました。

回答No.1

noname#206842

考え方を、変えてみてください！
デバイスは、それぞれ表示幅が、異なります。（高さではない:hight:autoでもいい）

その辺のCSSを、直せばＯＫだと思います。

/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

お礼

回答ありがとうございます。
今回はPC専用サイトなので、Media Queriesはあまり関係ないかな、と思うのですがPC専用サイトでも必要でしょうか？
ちなみに、念のため試してみましたが依然IE9はダメでした。