IE7中奇怪的浮动bug

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样式表中，它几乎是固定的。仍然是底部的边界，但不是太重要。