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

Question

我最近开始设置一个网站，并在firefox 4中遇到了问题。 我的主导航栏在页面顶部有一个意外的边距。 - 仅限Firefox 4。 Chrome，IE8，IE9，IE7，Safari工作正常。只有FF4似乎有问题。 我如何才能优雅地解决这个问题，而不会因为ff黑客而使我的CSS陷入困境？

感谢您的亲切：

直播演示的网址：http://www.creativeworkx.at

Answer 1

来自2em div的#main-wrap页边距正在导致它。

将margin-top: -2em添加到#doc div修补程序。

Answer 2

这个css是坏人：

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

Answer 3

我为你的案子制定了一个简单的测试：

<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的乐趣。的： - ）