奇怪的佈局行爲

這裏的德codez：奇怪的佈局行爲

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
      html, body 
      { 
       margin: 0px; 
       padding: 0px; 
      } 
      #pageContainer { 
       min-width: 100%; 
       float: left; 
       background-color: red; 
      } 
      #leftColumn { 
       float: left; 
       background-color: lime; 
      } 
      #rightColumn { 
       position: relative; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="pageContainer"> 
      <div id="leftColumn">Left column</div> 
      <div id="rightColumn">Right column</div> 
     </div> 
    </body> 
</html>

在IE8 /歌劇/ FF一切都看起來不錯。如果我採用IE8並打開IE7模式（符合標準），突然出現一個水平滾動條。可疑的是它和左欄一樣大。有任何想法嗎？！

Example

來源

2011-03-11 Vilx-

它發生在這個http://jsfiddle.net/pexZm/爲你嗎？ – JamesHalsall 2011-03-11 13:42:52

+1，以獲得正確的測試用例。 – thirtydot 2011-03-11 13:44:44

@Jaitsu - 是的，它的確如此。 – 2011-03-11 13:45:25

兩個解決方案。在右列中，有：

如果您不需要它，請移除position: relative。
或者，保持並添加zoom: 1。

這全是關於hasLayout。

來源

2011-03-11 13:48:03 thirtydot

謝謝，縮放：1修正了它！我確實需要相對的位置。 – 2011-03-11 13:57:10

奇怪的佈局行爲

回答

相關問題