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

Question

我有这个简单的代码，包装器内有两个浮动的左 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% 宽度，这里是演示

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

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

泰！

Answer 1

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

您会注意到，如果您在 IE7 中更改浏览器宽度，一半的布局工作，而另一半的布局由于divs 的组合宽度比实际应该宽一个像素而被破坏。

你可以做一些不同的事情来解决这个问题，这里有一个：

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

#wrap {
    margin: 0 auto;
}

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

div我还在HTML 中交换了你的 left 和 right 的顺序。