什么可能导致 Firefox 中出现此 CSS 边距共享（？）错误？答案

【问题标题】：What might cause this CSS margin sharing(?) bug in Firefox to occur?什么可能导致 Firefox 中出现此 CSS 边距共享（？）错误？
【发布时间】：2011-07-02 12:37:25
【问题描述】：

我今天在工作中遇到了这个不寻常的仅限 Firefox（据我所知 - 我只检查了 Safari 和 Chrome，并且使用的是 Firefox 3.6）CSS 错误，并设法用更小的 sn- 重现了这个问题p 的代码，在这里：

<!DOCTYPE html>
<head>
    <style>
    /*
     * A small snippet of some CSS resets code from html5doctor and YUI fonts and resets
     * added just to make sure it's not from weird browser padding/margin. Still happens
     * if this is removed though
     */
    html, body, div, span, p, ul, li {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        background: transparent;
    }

    body {
        line-height: 1;
    }

    li {
        list-style: none;
    }

    body {
        color: #333;
        font-family: Helvetica, Arial, Verdana, Geneva, sans-serif;
        line-height: 1.3;
    }

    /* Some clearfix code from HTML5 Boilerplate */
    .clearfix:before, .clearfix:after {
        content: "\0020";
        display: block;
        height: 0;
        visibility: hidden;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        zoom: 1;
    }
    </style>
</head>
<body>
    <div style="padding: 20px; border: solid thin black;">Hello!</div>
    <div>
        <ul class="clearfix">
            <li style="float: left; padding: 5px; border: solid thin black;">There</li>
            <li style="float: left; padding: 5px; border: solid thin black;">should</li>
            <li style="float: left; padding: 5px; border: solid thin black;">be no</li>
            <li style="float: left; padding: 5px; border: solid thin black;">margin</li>
            <li style="float: left; padding: 5px; border: solid thin black;">above</li>
            <li style="float: left; padding: 5px; border: solid thin black;">this</li>
            <li style="float: left; padding: 5px; border: solid thin black;">list</li>
        </ul>
        <p style="margin-top: 30px">Yet for some reason the 30px margin-top on this p applies to both this p as well as the above list</p>
    </div>
</body>
</html>

这是问题的截图

所以我通常期望在这里发生的是两个<div>s 之间或<ul> 上方没有边距，实际上，将鼠标悬停在 Firebug 中的元素上将不会显示边距/填充颜色。但是由于某种原因，<p> 的 30px 顶部边距同时应用于<p>，以及它包含的<div>。我的猜测是 clearfix 出了点问题（事实上，如果您使用清除 <br/>，这个问题就会消失），但我很好奇是否有人能深入了解这里的问题到底是什么。谢谢！

【问题讨论】：

标签： css clearfix

【解决方案1】：

但是 - 房间里没有提到的大象是一个 Firefox 浮动错误，它影响至少 3.6-6（已测试）。带有 ':after { content:"" }' 样式的浮动容器（内容为空或任何类型或空格）将复制以下元素的边距顶部！这似乎只影响 Firefox，显然是一个错误。

简单的测试用例：

<div class="container cf">
    <div class="floater"></div>
</div>
<div class="next">
    <p>Some content here!</p>
</div>

<style>
body { padding: 0; margin: 0; }
.cf:after { content:""; display:block; clear:both; *zoom:1; }
.container { background:gray; }
.floater { float:left; width:46%; height:200px; margin:0 10px; background:#ddd; }
.next { background: yellow; margin: 30px 0px; }
</style>

http://jsfiddle.net/TjW6c/394/

【讨论】：

【解决方案2】：

没错，你没有使用正确的 clearfix ;-)

这个应该可以解决问题：

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

见： http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

【讨论】：

嘿蒂埃里，谢谢！实际上，我在对下面答案的评论中引用了您的帖子 - 似乎 Boilerplate clearfix 是您的 clearfix 和 perishablepress clearfix 的某种混合物。我是否正确理解您的 clearfix 版本仍然保留边距，但只是使其顶部和底部在所有浏览器中保持一致？
嗨，约翰尼，你是对的。我发现 Boilerplate 中的 clearfix 技术应该是我的（它链接到我的 YUIBlog 帖子）。我的猜测是，当他们编辑之前的规则时，内容值和可见性属性没有更新。 Boilerplate 团队知道这一点，应该尽快进行更新。关于边距，是的，它们不会折叠 - 对于框的第一个和最后一个子元素 - 并且跨浏览器也是如此。

【解决方案3】：

您没有使用 clearfix 权限。使用 positioniseverything's clearfix(a.k.a. pie-clearfix) 通常是我对所有 clearfixes 的解决方案：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

您可以在这里查看：http://jsfiddle.net/WVtYd/

【讨论】：

嗯，这指出了一些有趣的事情。所以我正在使用 HTML5 Boilerplate clearfix，它似乎是 perishablepress 和 tjkdesign clearfixes 的组合（在此处描述：yuiblog.com/blog/2010/09/27/…），不同之处在于 Boilerplate 为内容使用空间，而不是句点。如果您在 Boilerplate clearfix 中将空间换出一段时间，这个问题就会消失，但我不确定这对垂直边距折叠有什么影响