背景图像在除 Firefox 之外的所有浏览器中的位置错误答案

【问题标题】：Background image wrong position in all browsers except Firefox背景图像在除 Firefox 之外的所有浏览器中的位置错误
【发布时间】：2013-07-23 04:36:13
【问题描述】：

我的网站设计需要在页面顶部运行背景图片。您可以在this screenshot 中看到它应该是什么样子。 Link to my site.

不幸的是，我使用 Firefox 来检查我的工作，同时将它们放在一起。我使用了 FireFox，因为它有 Firebug。该站点在 Firefox 中看起来正确，但在 Safari、Chrome 和 IE 中却是错误的。在 Safari、Chrome 和 IE 中，背景主体包装器背景图像位于菜单下方。 Example screenshot 顶部的背景是错误的。

是否可以轻松修复背景图像，使其适用于所有浏览器，还是我必须后退几步才能修复标记中的一些基本问题？

【问题讨论】：

您能否展示您的标记（HTML、CSS 等）以显示图像？在不知道自己做了什么的情况下很难提供帮助。
你为什么给我们截图而不只是给我们链接？：dansdemos.info/prelaunch/WorldClothingCorp_QA
对不起，我的错...这里是该网站的链接：dansdemos.info/prelaunch/WorldClothingCorp_QA 感谢您的回复。
显然，根据提出的相关问题以及缺乏答案，这是一个没有太多一般答案的常见问题。当我得到答案时，我会提出来。同时，感谢回复和编辑我的问题的人。
背景本身似乎不是问题。这是#wrapper div 的位置。在 Firefox 中，顶部为 0px，但在 Chrome 中为 78px。还不知道是什么导致了这种差异..

标签： css firefox

【解决方案1】：

#nav 上的边距正在折叠 (https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing)，因为其父级 (#wrapper) 没有上边距、填充或边框来包含它。解决您的问题的快速而简单的方法是将padding-top: 1px; 添加到您的#wrapper CSS。

【讨论】：

哇。谢谢你。我真的很敬畏。我将此标记为答案，但为了学习如何钓鱼......
抱歉，我在打字过程中被打断了。 1. 你是怎么得出这个答案的？我不会在一百万年后发现吗？ 2. 此页面的标记方式是否有问题导致此问题？
我应该做些什么来标记这个回答？我不能投票。
我相信您的问题的答案可以在答案中提供的链接中找到。
@DanAllen 如果不仔细查看您的代码，我很难说出您可能如何改变这种情况（除了我建议的 hack）。但是我可以使用Chrome Developer Tools 来解决这个问题，这在很多方面都与 Firebug 非常相似。

【解决方案2】：

更改#nav 的margin 属性并将padding 添加到等于背景图像高度的#wrapper。

#nav {
     margin: 0 auto;
}
#wrapper {
     padding-top: 85px;
}

【讨论】：