css：Firefox 4 css 中的意外边距/填充

Question

我最近开始建立一个网站，但在 Firefox 4 中遇到了问题。 我的主导航栏与页面顶部有一个意外的边距。 - 仅在 Firefox 4 中。 Chrome、IE8、IE9、IE7、Safari 工作正常。只有FF4似乎有问题。 我怎样才能优雅地解决这个问题，而不会让我的 css 被 ff hacks 弄得一团糟？

感谢您的发言：

现场演示网址：http://www.creativeworkx.at

Answer 1

我已经为您的情况制定了一个简单的测试：

<div style="float:left;">test</div><div style="margin-top: 50px;"></div>

注意：设置margin-bottom而不是margin-top的作用类似，但可以通过在第二个DIV中添加内容来解决

这表明这是一种复杂的float 问题，导致意外渲染。

这种意外渲染甚至出现在 Firefox 以外的浏览器中，例如 Chrome。

---

但是，我最近找到了一个快速但不是正式的解决方案，可以意外地解决您感兴趣的问题。

只需在菜单后、第一个DIV或有边距的DIV之前添加一个文本，无论是空字符串还是 。

您可以通过具有零高度和块显示属性的元素来包装文本。

喜欢：

<div style="height:0">&nbsp;</div>

这个问题看起来就像被这个技巧解决了。 :-)

享受编写 CSS 的乐趣。 :-)

Answer 2

这个 css 是坏人：

#main-wrap {
    margin: 2em auto auto;
}

Answer 3

#main-wrap div 中的2em 边距导致了它。

将margin-top: -2em 添加到您的#doc div 修复中。