css - IE 中真正令人沮丧的 CSS 降压

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 除外):

在浏览器中:

Answer 1

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

发生的情况是，您的其中一列中有一个元素强制 #left 或 #right 的宽度大于 500 像素。解决此问题的最简单方法是开始删除元素，直到 float 下降消失。然后您可以确定是否有针对违规元素的解决方案(即设置其宽度或设置 overflow: hidden 或 scroll)。