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

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

  •  1
  • Kamiel Wanrooij  · 技术社区  · 16 年前

    我有一个非常简单的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 回复  |  直到 16 年前
        1
  •  4
  •   Steve Perks    16 年前

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

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

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

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

        2
  •  2
  •   Grant Wagner    16 年前

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

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

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

        3
  •  1
  •   Tommy Gagnon    12 年前

    加上 &nbsp;

        4
  •  0
  •   annakata    16 年前

    因为IE7是 still float bugged 恐怕。