當父容器太窄時，IE6顛倒內容

在以下示例中，右側容器顯示在符合標準的瀏覽器中左側的容器的右側，但在IE6中，藍色右側容器出現在左側的下方一。因爲父容器比左側和右側容器的總寬度窄，所以IE6有效地將其顛倒。當父容器太窄時，IE6顛倒內容

我有以下HTML：

<html> 
    <head> 
     <style> 
     #parentcntnr{ 
      width: 900px; 
      border: 3px solid black; 
     } 

     #leftside{ 
      width: 200px; 
      float: left; 
      background-color: red; 
      position: relative; 

     } 

     #rightside{ 
      width: 800px; 
      background-color: blue; 
      margin-left: 210px; 
     } 

    </style> 
</head> 
<body> 
    <div id="parentcntnr"> 
     <div id="leftside"> content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br> content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br></div> 
     <div id="rightside">content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br></div> 
    </div> 
</body>

如何使這個像呈現在Firefox 3.5呢？當父容器小於子容器的總寬度時，我希望左側容器和左側容器並排保持並顯示水平滾動條。

備案：這是一個展示我在網站上遇到的問題的示例。當瀏覽器窗口的大小小於兩個子寬度的總和時，上述行爲就會發生。這對於屏幕分辨率較低的客戶端會造成問題。

來源

2009-11-11 Jack

那麼你真的有一個固定的父寬度，或者這是一個窗口調整大小的問題？ – 2009-11-11 22:58:06

網站上的最高級別的父級div具有固定的大部分其他所有內容，直到左側和右側容器具有自動寬度或100％寬度。 – Jack 2009-11-11 23:11:38

<html> 
<head> 
    <style> 
      #parentcntnr{ 
        width: 900px; 
        border: 3px solid black; 
      } 

      #leftside{ 
        width: 200px; 
        float: left; 
        background-color: red; 
        position: relative; 

      } 

      #rightside{ 
        width: 800px; 
        background-color: blue; 
        position: absolute; 
        float: right; 
      } 

    </style> 
</head> 
<body> 
    <div id="parentcntnr"> 
      <div id="leftside"> content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br> content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br></div> 
      <div id="rightside">content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br>content </br></div> 
    </div>

這修復它。

來源

2009-11-12 16:36:17 Karl

不適用於更好的瀏覽器。在每個Firefox和最新的IE8下。 – BalusC 2009-11-12 16:41:16

是的，但你可以添加 _position：absolute; _float：right; 相反，這隻會解決IE6。 – Karl 2009-11-12 16:47:31

對不起，但絕對定位是沒有意義的。 – BalusC 2009-11-12 16:49:55

如果你把你的右浮動元素在源代碼樹左側浮動元素之前：
< DIV ID = 「父」 >
< DIV ID = 「rightSide」/ >
< DIV ID = 「萊夫特賽德」/ >
</DIV >
應該採取關心你的浮動問題。我不確定如果你可以防止它們在父容器過於狹窄的時候被打破，IE6有一些奇怪的溢出邏輯。

來源

2009-11-11 23:08:47 zack

這似乎只是使紅色的左側容器呈現在藍色右側的容器下方，左側容器上方有一個白色空間的正方形。 – Jack 2009-11-11 23:25:42

繼續之前，您需要確保您使用的是正確的doctype。使用<!doctype html>。您還需要將所有錯誤的</br>元素替換爲<br>。

第一個問題是#rightside太寬。它的寬度爲800px，在填充寬度爲200px的容器寬度爲900px的容器#leftSide後，剩下的只剩下700px。所以：

#rightside{ 
    width: 700px; 
}

應該修復它。

第二個問題是，你不在任何地方漂浮#rightSide。它不會從#leftSide左右浮動。我們希望有它的右側側，所以

#rightside{ 
    float: right; 
}

應該修復它。這也使得margin-left完全多餘。

現在，它應該在較舊的IE瀏覽器中看起來很好（僅僅因爲它們是在浮動車上的越野車）。但在更好的瀏覽器中，容器div不會包裝兩個浮動元素。這是的，你仍然需要清除兩者事後浮動。這是通過添加基本上

<br style="clear: both;">

作爲容器div的最後一個元素。現在

，這在所有的瀏覽器工作的最終結果應該是這樣的：

<!doctype html> 
<html> 
    <head> 
     <style> 
      #parentcntnr { 
       width: 900px; 
       border: 3px solid black; 
      } 
      #leftside { 
       width: 200px; 
       float: left; 
       background-color: red; 
      } 
      #rightside { 
       width: 700px; 
       float: right; 
       background-color: blue; 
      } 
      . clear { 
       clear: both; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="parentcntnr"> 
      <div id="leftside"> content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br> content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br></div> 
      <div id="rightside">content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br></div> 
      <br class="clear"> 
     </div> 
    </body> 
</html>

希望這有助於。

來源

2009-11-12 16:49:19 BalusC

我想你錯過了這個問題的關鍵。右側必須寬於父容器的固定寬度。所以你不能將寬度改爲700px。過度寬的#rightside應該強制水平滾動條，而不是在#leftside之前下拉。 – Jack 2009-11-12 17:57:39

當父容器太窄時，IE6顛倒內容

回答

相關問題