html - 两个 div，每个 50% 宽度，向左浮动，在 IE7 中窗口调整大小时一个覆盖另一个

Question

我有这个简单的代码，包装器内有两个 float 的左侧 div。

    <div id="wrap">

        <div class="right">
            <p>I am right</p>
        </div>

        <div class="left">
            <p>I am left</p>
        </div>

        <div style="clear: both"></div>

    </div><!-- wrap -->

两个 div 都是 50% 宽度，这里是 demo

如果我在 IE7 中调整浏览器窗口的大小，第二个 div 会 float 在第一个下方。

如何解决这个问题？我一直在网上搜索解决方案，但没有成功。

是的!

Answer 1

在这种情况下，IE7 存在亚像素舍入问题。

您会注意到，如果您在 IE7 中更改浏览器宽度，则有一半时间布局有效，而另一半时间由于 div 的组合宽度为一个而破坏了布局像素比实际宽度要宽。

有几种不同的方法可以解决这个问题，这里是一个:

http://jsbin.com/OfeCEHo/1/

#wrap {
    margin: 0 auto;
}

.left {
    width: 50%;
    float:  left;
    background-color: red;
}
.right {
    overflow: hidden;
    background-color: blue;
}

我还调换了 HTML 中左右 div 的顺序。