两个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％，这里是demo

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

之下

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

泰！

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的顺序。