2010-11-19 42 views
0

在我的網站上的一個頁面上,右列中的表格太寬,而不是顯示滾動條,IE將它打包在內容下面在左欄中。我找不到解決辦法,因爲我不知道如何描述發生的事情。不可打包的float在IE中清除,但在所有其他瀏覽器中使用滾動條呈現

這裏是我用來證明該問題的代碼:

<style> 
    #col1 { float: left; width:189px; font-size:8pt;} 
    #col3 { width: auto; margin: 0 0 0 191px; } 
</style>    
<body>   
    <div id="col1"> 
      <div style="padding-top:30em;border:1px solid red">really tall</div> 
    </div> 
    <div id="col3">   
      <h1>title</h1> 
      <table border="1"> 
      <tr> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
       <td>aaaaaaaaaa</td><td>aaaaaaaaaa</td> 
      </tr> 
     </table> 
    </div> 
</body> 

在這裏,它是如何呈現在IE:

在所有其他的瀏覽器,一個公司的表格顯示了剛下「標題「,我得到一個水平滾動條。這是我所期望的,但由於某種原因,IE想要清除col1中的內容。我試過應用寬度,浮動等,但我無法讓IE將標題放在標題下,而不清除col1內容。

我認爲這有一些IE黑客攻擊,但它是什麼?

回答

1

添加zoom:1到#COL3的CSS,這將解決

http://jsfiddle.net/fcalderan/ZPztF/

附註:(它的hasLayout到相關問題)這是一種魔法(CIT女王)。=)

http://reference.sitepoint.com/css/haslayout

+0

我自己設計的問題是在這裏設置縮放以強制「hasLayout」屬性爲true,或者是否在IE中翻轉不同的隱藏設置? – Adrian 2010-11-19 17:01:10

+0

我試過了,它在IE6中沒有任何作用。 @antonlavey - 它只用於觸發hasLayout爲true。 – 2010-11-19 17:01:32

+0

確認這適用於IE7。感謝澄清meder – Adrian 2010-11-19 17:02:12

1

你可以在col3上設置寬度嗎?如果不是,請嘗試將邊框調整爲CSS,而不是HTML邊框。在桌上也嘗試border-collapse:collapse;。如果您可以在col3上設置寬度,也可以使用overflow:hidden;。您也可以嘗試使用 兩個而不是浮動。

編輯:終於讓我的解決方案在IE6中工作。它需要源訂單更改,但內容現在可以首先發布。

編輯#2:我的解決方案工作怪癖IE6/IE7/IE8和標準IE6/IE7/IE8以及Fx,Chrome。

http://work.arounds.org/sandbox/67/run

+0

我不能設置COL3的寬度 - 這是一個流體佈局,並與瀏覽器的寬度擴大。我嘗試了其他建議,但沒有運氣。 – 2010-11-19 16:34:22

+0

可以downvoter解釋它的原因? – 2010-11-19 16:49:14

+0

+1來彌補downvote,它是一個完全合理的答案 – 2010-11-19 16:53:38

0

你嘗試添加溢出:汽車;到#col3風格?

+0

是的,沒有效果。 – 2010-11-19 16:35:01

相關問題