5

我有这个简单的例子：

<header>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li class="clear"></li>
    </ul>
</header>
<section>section</section>

而这段CSS：

BODY, HTML{
    margin: 0;
}
header{
    margin-bottom: 100px; /* section goes down */
}
UL{
    list-style-type: none;
}
UL LI{
    float: left;
    background: green;
}
.clear{
    clear: both;
    float: none;
}
section{
    background: red;
}

所以我希望“标题”直接到左上角，然后是 100px 边距，然后是“部分”。在所有按预期工作的主要浏览器中，但在 Firefox（版本 16）中，“标题”由于某种原因获得了额外的 margin-top。

这是一个错误吗？

这是一个 jsfiddle 示例：http: //jsfiddle.net/AvZek/2/

顺便说一句，如果我使用 clearfix 而不是“clear”类，那么它工作得很好。

4

3 回答 3

5

毫无疑问，这是一个错误。保证金绝对不应该在那里。

  • 根据 Firebug 的说法，我可以看到计算的唯一非零边距margin-bottom: 100px在您的header元素上与在您的 CSS 中相同。其他一切都是零。

  • 甚至 Firebug 的 DOM 检查器也难以识别它；它从不突出显示该区域，除非您在检查html自身时（它作为其内容区域的一部分突出显示）。

我发现了大量的错误报告，这些错误报告作为这个报告的副本关闭，还有更多的测试用例。另外，它看起来至少从 Firefox 2 开始就已经存在了。

于 2012-10-25T14:53:09.837 回答
4

而不是用非语义和不必要的空<li>-s 污染您的代码，只需添加overflow: hidden到您的<ul>

HTML

<header>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</header>
<section>section</section>

CSS

ul {
    list-style-type: none;
    overflow: hidden;
}

演示

于 2012-10-25T14:25:59.220 回答
0

您可以使用{padding-bottom:100px;}而不是保证金来实现这一点..

于 2012-10-25T14:23:18.550 回答