html - IE7 标题错误导航出 3px

Question

我的网站标题在大多数浏览器中显示正常，但在 IE7 中测试时。

在 IE7 中，您可以看到深蓝色 #nav div 在本应与浅蓝色标题对齐时突出的行。这是有原因的吗？

要在 IE7 中查看，请转到 IE9 > F12 兼容模式

我的标题整体为 109px:

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

上面 Logo 的 66px 高度图像开始，然后是 43px 高度的 div #nav。为什么当 43 + 66 = 109px 时它会伸出来？

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

Answer 1

编辑:

您也可以将图像作为 CSS 背景图像放在#header 中，而不是元素....

---

一个快速的解决办法是，添加 top: -3px 到目标 IE7。但这不是最佳做法。

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