html - IE7 ヘッダー バグ ナビゲーション アウト 3px

Question

私のウェブサイトのヘッダーは、ほとんどのブラウザーで正常に表示されますが、IE7 でテストすると表示されます。

IE7 では、濃い青色の #nav div が、水色のヘッダーに沿って実行されるべきときに突き出ていることがわかります。これには理由がありますか？

IE7 で表示するには、IE9 > F12 互換モードに移動します。

私のヘッダーは全体で 109px です:

#header {
  height: 109px;
  width: 800px;
}

上のロゴの高さ 66 ピクセルの画像が始まり、高さ 43 ピクセルの div #nav が続きます。43 + 66 = 109px のとき、なぜ突き出ているのですか?

#nav {
  background-color: #0071A7;
  height: 43px;
  position: relative;
  width: 800px;
}

Answer 1

編集:

要素ではなく、#header に CSS background-image として画像を配置することもできます....

---

簡単な修正は、top: -3px をターゲット IE7 に追加することです。ベストプラクティスではありません。

#nav{
    position: relative;
    *top: -3px;
}