什么可能导致Firefox中的CSS边缘共享(？)错误发生？

Question

什么可能导致Firefox中的CSS边缘共享(？)错误发生？

我遇到了这个不寻常的Firefox(据我所知 - 我只针对Safari和Chrome进行了检查,并且正在使用Firefox 3.6)今天在工作中使用CSS bug,并设法用更小的代码片段重现问题,这里:

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

Run Code Online (Sandbox Code Playgroud)

这是问题的截图

那么,我通常想到会在这里发生的是,有两个之间没有余量<div>S,或者上面的<ul>,而事实上,悬停在Firebug的元素将显示无保证金/填充颜色.但由于某种原因,30px的利润率顶部<p>正在被应用于 <p>它及其包含<div>.我的猜测是有什么地方与clearfix车(事实上,如果你使用一个清算<br/>,这个问题消失了),但我很好奇,如果任何人有洞察这里究竟问题.谢谢!

Answer 1

小智 6

这是正确的,你没有使用正确的clearfix ;-)

这个应该解决这个问题:

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

Run Code Online (Sandbox Code Playgroud)

请参阅:http: //www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

归档时间：	15 年前
查看次数：	3672 次
最近记录：	14 年，6 月前