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

質問

サイトを作成して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;
}

回答No.1

ovtave-G · ベストアンサー

IE7のバグのようですね。
http://coliss.com/articles/build-websites/operation/css/577.html

ご参考まで

お礼

ご回答ありがとうございます。
頂いたリンク先は確認してました。

結局*:first-child+html .top h3{
padding-top:20px;
}
でIE7だけCSSの設定をしました。