Firefox 9 (Mac) 解析边距有问题？答案

【问题标题】：Firefox 9 (Mac) is bugged parsing margins?Firefox 9 (Mac) 解析边距有问题？
【发布时间】：2012-02-19 22:45:36
【问题描述】：

我当前的项目中有一个非常奇怪的问题。 #head div 看起来启用了 margin-top css 设置，但实际上没有。只出现在Firefox 9.0.1 (Mac)上，其他浏览器都可以。

这里是link to the demo layout。不确定它是否发生在 FF 9.0.1 Win 版本中。但是，IE7 可以正确呈现它。请参阅附加图像以查看其呈现方式。因此，如果您在 Firebug 中禁用 #head div 下的 margin-bottom:23px，您会看到它会向上移动，但为什么会这样！？这是我们禁用的margin-BOTTOM 设置...

这是我，还是这个FF？

【问题讨论】：

标签： html css firefox layout margin

【解决方案1】：

这里发生的情况是下边距与上边距折叠，结果都被视为上边距。 CSS 规范要求这种行为，所有现代浏览器（当然不包括 IE7）都实现了它。

【讨论】：

就像我说的，问题只出在 Firefox 中。 Safari、Chrome、Opera（所有最新版本）都可以很好地渲染它。此外，Firebug 没有看到有一个 top-margin 计算出来。您能否提供描述所需行为的 CSS 参考部分的链接？
折叠影响使用的值，而不是计算值。相关规范部分是w3.org/TR/CSS21/box.html#collapsing-margins“两个边距相邻”列表的第三项的第四项。同样在同一节中，文本显示“如果元素的边距与其父级的上边距一起折叠，则框的上边框边缘被定义为与父级的相同。”这就是你在这里遇到的情况。浏览器都这样做，在简单的测试用例中，我刚刚尝试过，所以我不知道为什么在你的特定页面上 Opera 和 WebKit 会做一些不同的事情。
啊，看起来 .cf:after 样式会影响其他浏览器的行为，但由于某种原因不会影响 Firefox 中的行为。以防万一，我会在 Firefox 上提交一个错误。
啊，你可能遇到了bugzilla.mozilla.org/show_bug.cgi?id=451791。与其添加在修复该错误时会破坏的东西，不如给你的 #head 一个非常小的（例如 0.01 像素）底部填充，以防止开始时边距折叠行为。
谢谢鲍里斯！非常感谢您富有洞察力的回复！

【解决方案2】：

你总是可以把它放在你的样式表中。

@-moz-document url-prefix() {
    #head{
        margin-top: -10px !important;
    }
}

检查一下 - http://jsfiddle.net/nBWLq/2/。

【讨论】：

使用特定于 UA 的技巧来“解决”规范的正确实施只会意味着它在碰巧实施该规范的其他 UA 中被破坏，不是吗？