在IE中真的令人沮丧的CSS Stepdown

Question

在我的网站中，我有两个div - 左右。两者都包含在包装器div中。这是我的代码：

#wrapper{
    width:1000px;  
    height:750px;
    margin:auto;
}

#left{
    width:500px;
    height:750px;
    float:left;  
    position:relative;
}

#right{
    width:500px;
    height:750px;
    float:right;
    position:relative;
}

在Chrome中，没问题。

在Firefox中，没问题。

在Safari中，没问题。

在Opera中，没问题

在IE中，＃right div水平位于同一位置，但垂直位于#left div之下。

我尝试了一些不同的技巧来解决这个问题。将包装线高度设置为0，将右侧显示设置为内联，减小右侧和左侧div的大小（我想可能存在边距/填充问题）。我现在已经没想到了，任何人都可以提供任何帮助吗？

在所有浏览器中（IE除外）：

在IE中：

Answer 1

您发布的CSS没有任何问题。它将在all browsers as expected中起作用（我在示例中减小了宽度）。

正在发生的事情是，您的某个列中有一个元素会强制#left或#right的宽度大于500px。解决此问题的最简单方法是开始删除元素，直到浮点数消失。然后你可以弄清楚是否有违规元素的解决方案（即设置其宽度或设置overflow: hidden或scroll）。

Answer 2

尝试对float:left和#right div使用#left。您也可以取出position: relative。

Answer 3

将左右div分别设为float：left