css - 浮动时在 Firefox 中添加了额外的填充/边距：左

Question

谁能帮我理解这一点？

您可以在此处查看示例：

http://jsfiddle.net/zhsnj/3/

HTML：

<div class="rt-block">
    <div>
        <div>
            <div class="itemContainer">
                <span>Lorem ipsum dolor sit amet</span>
            </div>
            <div class="clr"></div>
        </div>
        <div class="k2Pagination">
        </div>
    </div>
</div> 

CSS：

.rt-block {
    margin: 10px;
    padding: 15px;
    position:relative;
}

.itemContainer {float:left;}

.k2Pagination {
    margin: 24px 0 4px;
}

.clr {
    border: medium none;
    clear: both;
    display: block;
    float: none;
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
}

在 Firefox 中，“itemContainer”和周围的“rt-block”之间存在间隙。其他浏览器没有这个。

它通过两件事来解决：删除 itemContainer 上的 float:left，以及删除 k2 分页上的边距。如果可能的话，我宁愿不做这两件事。

谢谢你的帮助

Answer 1

首先，这是我在 Firefox 中看到的显示：

我想你有太多了<div>。在 Firefox 上查看时，在第一个<div>after上添加了额外的填充<div class="rt-block">。我的猜测是它会产生一个换行符，导致浮动在该行下方浮动，这似乎可以通过添加line-height: 0到此 div 解决问题的事实得到证实。

您可以删除多余的<div>：

<div class="rt-block">
    <div>
        <div class="itemContainer">
            <span>Lorem ipsum dolor sit amet</span>
        </div>
        <div class="clr"></div>
    </div>
    <div class="k2Pagination">
    </div>
</div>                         

jsfiddle

或者您可以将第一个 div 的行高设置为 0：

.rt-block > div {
    line-height: 0;
}

jsfiddle

或者更好，使其成为内联块：

.rt-block > div {
    display: inline-block;
}

jsfiddle

Answer 2

我不知道 Firefox 中额外间距的原因是什么，但您可以提供填充而不是边距。

.k2Pagination {
padding: 24px 0 4px;}

这很简单，它可能会奏效。