Firefox 边距 css 的古怪行为答案

【问题标题】：Quirky behavior with Firefox margin cssFirefox 边距 css 的古怪行为
【发布时间】：2013-04-22 10:48:14
【问题描述】：

Firefox 中的边距设置发生了一些奇怪的事情，我有一个 id 为“wrap”的 div，顶部边距为 20px，当用户登录时，一个 div 出现在 id 为 user_nav 我的 wrap div 上方不希望在此 div 上方有任何边距，但 Firefox 出于某种未知原因将我在 wrap div 上的顶部边距传播到其上方的 user_nav div，这在任何其他浏览器中都不会发生。

如果我从 wrap div 中删除上边距，它会从两者中删除。

我可以通过给 user_nav div 一个负的上边距来摆脱它，但这会弄乱所有其他浏览器。

div#user_nav {
width: 980px;
margin: 0 auto;
}


div#wrap {
width: 980px;
margin: 20px auto 30px auto;
}

对正在发生的事情有什么想法吗？

谢谢

罗伯·芬威克

【问题讨论】：

你能把你的代码放在jsFiddle吗？
查看您的 html 也会很有帮助。正如@Adrift 所说，jsFiddle 吧！
我不熟悉 jsFiddle，所以我希望这是你想要的 jsfiddle.net/69aD9 我没有所有的代码，只有 html 和 css，但你可以在 Firefox 中看到行为谢谢跨度>

标签： css firefox margins

【解决方案1】：

这确实是一种古怪的行为 - 它似乎是这个与清除块元素（或其众多重复项之一）相关的旧错误的影响之一：

https://bugzilla.mozilla.org/show_bug.cgi?id=451791

解决它的一种方法是摆脱 <div class="clear"> 并改用溢出的清除方法（尽管这并非总是可能，例如 - 显然 - 如果你在 clear 内有内容将延伸到它之外的元素）：

http://www.quirksmode.org/css/clearing.html

即，从 user_nav_frame 内部删除 <div class="clear"> 并在 CSS 中对其应用 overflow: hidden（和 width: 100%）以清除浮动：

div#user_nav_frame {
    background-color: #0A4D84;
    overflow: hidden;
    width: 100%;
}

JSFiddle：http://jsfiddle.net/69aD9/2/

如果这对您的情况不起作用，也有反黑客攻击。请参阅上面的错误报告。

【讨论】：