当float：left时，在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”之间存在差距。其他浏览器没有这个。

它由两件事来修复：删除float：left on itemContainer，同时删除k2分页上的边距。如果可能的话，我宁愿不做其中任何一件事。

感谢您的帮助

Answer 1

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

我认为你有太多<div>。在firefox上查看时，<div>之后的第一个<div class="rt-block">会添加额外的填充。我的猜测是它会产生一个换行符，导致浮动浮动在线下，似乎可以通过向此div添加line-height: 0来解决问题来证实。

您可以删除额外的<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;}

这很简单，也可能有用。