css - IE7 中奇怪的 float 错误

Question

在我正在处理的网页上 here ，我有一个主 div，在主 div 和图像 div 中。粗略地说，重要的 HTML 是:

<div id="wrapper">
    <div id="main">
        <div class="images">
            <p>Content</p>
            <div class="clear"></div>
        </div>
        <p>Text...</p>
    <div class="clear"></div>
    </div>
</div>

和CSS:

div#wrapper
{
    padding: 10px;
    width: 90%;
}

div#main
{
    padding: 5px;
}

div.images
{
    float: right;
    width: 320px;
    margin-left: 5px;
}

div.clear
{
    height: 0;
    clear: both;
}

如果问题的原因不在此处的代码中，我深表歉意，但我认为是。

问题是，当 images div 变得比 main div 的内容大时，wrapper div 失去了它的左填充； main 的底部填充增加。这个问题似乎只出现在 IE7 中。

Answer 1

事实证明，给 #main hasLayout 就可以了。

div#main
{
    zoom: 1;
}

将它放入 IE7 样式表中，它就基本固定了。底部的边框仍然很大，但不是太重要。