Question

我有一个非常简单的HTML页面（验证为XHTML 1.0 Strict）：

<div class="news-result">
    <h2><a href="#">Title</a></h2><span class="date">(1-1-2009)</span>
    <p>Some text...</p>
</div>

使用以下CSS：

.news-result {
    overflow: hidden;
    padding: 30px 0 20px;
}

.news-result h2 {
    float: left;
    margin: 0 10px 0 0;
}

.news-result span.date {
    margin: 1px 0 0;
    float : left;
}

.news-result p {
    padding: 3px 0 0 0;
    clear: left;
}

在IE6或FF3中渲染此页面可以完美呈现（标题和日期在一行上，后跟段落）。但是，在IE7中，标题和日期以及段落之间有很大的空间。

我们有一个简单的重置，清除每个元素上的每个边距和填充。

删除日期元素上的浮动可以解决此问题，就像在段落上设置zoom: 1或删除容器上的overflow: hidden一样，但所有这些都不理想。为什么一个float后跟一个段落会触发这个额外的上边距，仅在IE7上？

Answer 1

我可以假设你有一个doc-type？

但是，将h2和span更改为display：inline;还应该清理你的问题。

编辑---添加hasLayout

了解内联并不总是一种选择，这里是article explaining what's going on。

基本上你必须给<p> hasLayout。有很多方法可以做到这一点，我不喜欢使用<div class="clearall"></div>而更喜欢使用overflow: hidden;或zoom: 1;

Answer 2

我在IE6,7和8B2中看到了额外的空白。

IE似乎在<p>标签上应用了非零的上边距。

我可以通过进行以下更改来删除IE中的空白：

.news-result p {
    margin-top: 0;
    padding: 3px 0 0 0;
    clear: left;
}

此更改似乎在Firefox 2或3，Opera 9.63或Safari for Windows 3.2.1中没有任何负面副作用。

Answer 3

只需在浮动的DIV和清算div之间添加 即可。这将消除差距。

Answer 4

因为IE7是still float bugged，所以我很害怕。

（修复了链接）

清除浮动时为什么IE7会导致保证金错误？

4 个答案: