页面顶部的空白区域（特定于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">下的<div id="contact-toggler-wrapper">。它在不影响布局的情况下完成了这项工作。