是什么导致Firefox中出现CSS边距共享（？）错误？_Css_Clearfix

是什么导致Firefox中出现CSS边距共享（？）错误？

css

是什么导致Firefox中出现CSS边距共享（？）错误？,css,clearfix,Css,Clearfix,我今天在工作中遇到了这个不寻常的Firefox特有的CSS错误（据我所知，我只检查了Safari和Chrome，并且使用了Firefox 3.6），并设法用一段小得多的代码重现了这个问题，如下所示： <!DOCTYPE html> <head> <style> /* * A small snippet of some CSS resets code from html5doctor and YUI fonts and resets

我今天在工作中遇到了这个不寻常的Firefox特有的CSS错误（据我所知，我只检查了Safari和Chrome，并且使用了Firefox 3.6），并设法用一段小得多的代码重现了这个问题，如下所示：

<!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>


/*
*一些CSS的一小部分从html5doctor和YUI字体中重置代码并重置
*添加只是为了确保它不是来自奇怪的浏览器填充/边距。仍然发生
*如果这个被移除了
*/
html，body，div，span，p，ul，li{
保证金：0；
填充：0；
边界：0；
大纲：0；
字体大小：100%；
背景：透明；
}
身体{
线高：1；
}
李{
列表样式：无；
}
身体{
颜色：#333；
字体系列：Helvetica、Arial、Verdana、日内瓦、无衬线；
线高：1.3；
}
/*HTML5样板中的一些clearfix代码*/
.clearfix:之前，.clearfix:之后{
内容：“\0020”；
显示：块；
身高：0；
可见性：隐藏；
}
.clearfix:之后{
明确：两者皆有；
}
.clearfix{
缩放：1；
}
你好

那里
应该
必须为否
页边空白
上方
这个
列表

但由于某些原因，此p上的30px margin top适用于此p以及上述列表

下面是问题的屏幕截图

因此，我通常希望在这里发生的是，两个

之间或

上方没有边距，实际上，在Firebug中的元素上悬停将不会显示边距/填充颜色。但出于某种原因，

的30px边距顶部同时应用于

及其包含的

。我的猜测是clearfix出现了问题（事实上，如果您使用clearing

，这个问题就会消失），但我很好奇是否有人能洞察到底是什么问题。谢谢

您没有正确使用clearfix。使用通常是我所有clearfixes的解决方案：

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

您可以在这里查看：

没错，您没有使用正确的clearfix；-）

这一个应该解决这个问题：

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

见：

但是-房间里没有提到的大象是一个Firefox浮动错误，它至少影响3.6-6（已测试）。在{content:“}”（其中content为空或任何类型或空白）之后设置“：的float容器将复制以下元素的边距顶部！这只会影响Firefox，显然是一个bug

简单测试用例：

<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>


这里有一些内容
正文{填充：0；边距：0；}
.cf:在{content:”；显示：块；清除：两者；*缩放：1；}
.container{背景：灰色；}
.float{float:left；宽度：46%；高度：200px；边距：010px；背景：#ddd；}
.next{背景：黄色；边距：30px 0px；}

嗯，这说明了一些有趣的事情。所以我使用的是HTML5样板文件clearfix，它似乎是易腐新闻和tjkdesign clearfix（这里描述：）的组合，不同之处在于样板文件使用了一个空间来存储内容，而不是一个句点。如果在样板文件clearfix中交换一段时间的空间，这个问题就会消失，但我不确定这对垂直边距塌陷有什么影响嘿，Thierry，谢谢！事实上，我在下面的答案评论中提到了你的帖子——似乎样板clearfix是你的clearfix和易腐Press clearfix的混合体。我是否正确地理解了您的clearfix版本仍然保留了页边空白，但只是使其在所有浏览器的顶部和底部保持一致？嗨，Johnny，您是对的。我发现样板文件中的clearfix技术应该是我的（它链接到我的YUIBlog帖子）。我的猜测是，当他们编辑以前的规则时，内容值和可见性属性没有更新。样板团队知道这一点，应该很快进行更新。关于页边距，是的，它们不会崩溃——对于框的第一个子项和最后一个子项来说都是如此——而且这种情况会在浏览器之间发生。