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

我最近开始设置一个网站，并在Firefox 4中遇到了问题。我的主导航栏在页面顶部有一个意外的边距。 - 仅适用于Firefox 4. Chrome，IE8，IE9，IE7，Safari可以正常工作。只有FF4似乎错误周围。我怎样才能解决这个优雅没有混乱与ff黑客我的CSS？css：在Firefox 4中意外的边距/填充css

感谢您adive：

URL的现场演示：http://www.creativeworkx.at

来源

2011-05-13 Michael Creativeworkx

从#main-wrap DIV的2em保证金是导致它。

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

来源

2011-05-13 12:31:09

谢谢你，我太盲目了。但为什么只有FF？ – 2011-05-13 12:38:04

由于怪癖模式。提供适当的Doctype和FF将更加严格。 – 2011-05-13 12:39:04

为什么怪癖？这是正常的HTML 5标签？ – 2011-05-13 12:40:20

这个CSS是BadGuy仅仅：

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

来源

2011-05-13 12:31:40 jerone

谢谢你的帮助！ – 2011-05-13 12:42:31

我不明白。＃main-wrap不会环绕#top换行。＃main-wrap如何从页面的顶部到＃顶部换行产生一个页边距？ – 2011-05-13 12:51:31

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

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

注：设置margin-bottom代替margin-top作用相似，但可通过将内容添加到第二个来解决DIV

它表明它是一种com激起float问题，导致意想不到的渲染。

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

但是，我最近发现了一个快速但并非正式的解决方案来解决您不可预测的有趣问题。

只需添加一个文本，不管是空白字符串还是 之后的菜单，第一个DIV或之前有空白的DIV。

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

像：

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

问题看起来像被这一招解决。 :-)

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

来源

2011-05-13 14:33:37 tytsim

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

回答

相关问题