css - 页面顶部的空白（特定于 Firefox）

Question

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

我正在使用 HTML5、modernzr 和 jquery。

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

Answer 1

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

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

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

Answer 2

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

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 上将如下所示：

Answer 3

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