在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格下面。

我已經嘗試了幾種不同的技術來解決這個問題。將包裝線高度設置爲0，將右側顯示設置爲內聯，減小右側和左側div的大小（我認爲可能存在邊距/填充問題）。我現在已經沒有想法了，有沒有人可以提供這個問題的任何幫助？

在所有瀏覽器（除了IE）：

在IE：

Answer 1

您發佈的CSS沒有任何問題。它將在all browsers as expected（我在我的例子中減少了寬度）工作。

發生了什麼事情是，您的某列中有一個元素，它強制使#left或#right的寬度大於500px。解決這個問題的最簡單方法是開始刪除元素，直到float drop消失。然後，您可以確定是否存在違規元素的解決方案（即設置其寬度或設置overflow: hidden或scroll）。

Answer 2

嘗試使用float:left兩者的#right和#left的div。您也可以取出position: relative。

Answer 3

將左右div分別設爲float：left