css - 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”之间存在间隙。其他浏览器没有这个。

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

感谢您的帮助

Answer 1

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

我觉得你有太多了<div> .在 firefox 上查看时，会在第一个 <div> 上添加额外的填充在 <div class="rt-block"> 之后.我的猜测是它产生了一个换行符，导致 float float 在该行下方，添加 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

或者更好，让它成为内联 block :

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

jsfiddle