1

我有一个非常简单的 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在容器上删除一样，但都不是理想的。为什么浮动后跟一个段落会触发这个额外的上边距，只在 IE7 上？

4

4 回答 4

4

我可以假设您有文档类型吗？

但是，将 h2 和 span 更改为 display: inline; 也应该澄清你的问题。

编辑---添加hasLayout

了解内联并不总是一种选择，这里有一篇解释发生了什么的文章。

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

于 2009-01-07T17:12:11.730 回答
2

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

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

通过进行以下更改，我能够删除 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 中，这一变化似乎没有任何负面影响。

于 2009-01-07T17:06:44.173 回答
1

只需&nbsp;在浮动 DIV 和清除 div 之间添加。这将消除差距。

于 2012-07-30T13:51:36.160 回答
0

因为 IE7仍然 是浮动 窃听器，恐怕。

（修复链接）

于 2009-01-07T17:14:35.920 回答