IE7で見出しタグ(hタグ)をみるとずれる

解決済

質問者：shokapeace
質問日時：2012/06/06 18:44
回答数：1件

サイトを作成してIE7で躓いてます。

<div class="box">
<div class="top"></div>
<div class="mid"></div>
<div class="under"></div>
</div>と

<div class="box">で囲みtopとmidとunderで3等分してます。

<div class="top">をpddingで上部を10px幅をあけてます。
中に<h3>の見出しタグを入れてます。

IE8以降
クローム
Firefox　では10px分の幅の後に、<h3>タグが入ります。
IE6はアンダースコアハックしました。

IE７ですと<div class="top">で設定したpddingが無視されて<h3>との間に空白ができません。

IE7でも他のブラウザと同じように表示されるようにするにはどうしたらよいでしょうか？
検索で探してみたものの見つからなかったので解決法または、解決法が記載してあるサイトを教えていただけますでしょうか？
よろしくお願いいたします。

■test.html
<div class="box">
<div class="top">
<h3>■■■■■</h3></div>
<div class="mid">
●●●この部分は文章の長さで伸びます●●●●
</div>
<div class="under"> </div>
</div>

■CSS
body{
font-family: "メイリオ", "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 75%;
line-height: 2;
color: #333333;
margin: 0px;
padding: 0px;
}

h1 h2 h3 h4{
padding:0;
margin:0;}

.top{
width: 690px;
height:70px;
color:black;
background: url(img/top.gif) no-repeat;
padding:10px 30px 0 30px;
}

.mid{
width: 690px;
min-height: 200px;
color:black;
background: url(img/mid.gif) repeat-y;
padding:0px 30px 0 30px;
}
.under{
width: 690px;
height: 20px;
color:black;
background: url(img/under.gif) no-repeat;
}

h3{
line-height: 20px;
color:blue;
font-size:17px;
}