页面顶部的空白（特定于 Firefox）[关闭]答案

【问题标题】：White space on top of page (Firefox Specific) [closed]页面顶部的空白（特定于 Firefox）[关闭]
【发布时间】：2012-05-31 15:05:45
【问题描述】：

只有在 Firefox 中，我的页面顶部有一个很大的空白。我试图检查所有元素，但找不到任何问题。我还检查了展开的边距，但找不到。

我正在使用 HTML5、modernzr 和 jquery。

网址：http://devvanickcom.vanickurl.com/

【问题讨论】：

很奇怪。当我在 Firefox DOM Inspector 中单击 overall-wraper div 时，问题就消失了。
这与 logo 类中的position:absolute 样式有关。如果它在 Firebug 中被禁用，差距就会消失。
对我来说，在 DOM 检查器中单击包装器 div 后，差距就消失了。然后无论我用力刷新页面多少次，我都无法让问题再次出现。我必须打开一个全新的窗口并在那里加载 URL 才能再次看到它。
这似乎是由于您在<div id="contact-toggler-wrapper"> 中的<hr class="clear">。删除它可以解决问题。我可以推测它会干扰，但老实说，我不知道 Firefox 显示问题的 exact 原因与该元素有关。可能与您使用文本缩进的方法有关...
如果我 (1) 使用 contact-toggler-wrapper 类将带有 logo 类的锚元素移动到 div 元素内部（就在清除 div 的上方）并 (2) 删除位置：absolute contact-toggler-wrapper 类的样式对我来说开始变得更好了。

标签： css html firefox

【解决方案1】：

这似乎是一个 Firefox 错误 (#451791)。边距塌陷做错了。它通过hr.clear 折叠，因为它没有高度/填充/边框，导致hr.clear 上方有90px 的边距，但它也在浮动元素下方应用了90px 的正确边距。

通常可以防止边距崩溃的任何修复都将阻止此行为。例如，设置hr.clear { height: 1px } 会将所有内容向上推，但它也会将内容向下移动一个像素，这是不可取的。一个有趣的修复是设置header { padding-top: .001em }。这不会添加足够的填充以实际在视觉上改变事物，但它足以防止边距折叠超出header 的边界。

或者，您可以重写代码以避免这种结构。

【讨论】：

【解决方案2】：

只需更改您的 css 的 #logo 类中的 position 属性，将其设置为：

position: relative，这个类看起来像：

#logo {
    background: url("/Content/images/sprite.png") repeat-x scroll left top transparent;
    display: block;
    height: 85px;
    position: relative;
    text-indent: -9999px;
    top: -20px;
    width: 180px;
}

之后，您需要更改header nav 类，（上边距为 90px）

header nav {
    margin: 40px 0 5px;
    padding: 0;
    text-align: center;
}

然后只需要完全按照你需要的方式进行调整，它在firefox上会是这样的：

【讨论】：

【解决方案3】：

这很奇怪。我想最简单和最好的方法是，就像 animuson 所说，删除 <hr class="clear"> 下的 <div id="contact-toggler-wrapper"> 。它在不影响布局的情况下成功了。

【讨论】：