代码之家 › 专栏 › 技术社区 › Kamiel Wanrooij

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

internet-explorer-7 internet-explorer css html

1

Kamiel Wanrooij · 技术社区 · 17 年前

我有一个非常简单的HTML页面(验证为XHTML 1.0):

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

.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 回复 | 直到 17 年前

1

4

Steve Perks 17 年前

我可以假定您有一个文档类型吗?

但是,将h2和span更改为显示:inline;也应该解决你的问题。

理解内联并不总是一个选项,这里有一个 article explaining what's going on .

<p> hasLayout。有很多方法可以做到这一点,我不喜欢使用 <div class="clearall"></div> overflow: hidden; 或 zoom: 1;

2

Grant Wagner 17 年前

IE似乎将非零上边距应用于 <p>

我可以通过以下更改删除IE中的空白:

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

3

1

Tommy Gagnon 14 年前

加上  

4

0

annakata 17 年前

因为IE7是 still float bugged 恐怕。