2008-08-11 100 views
52

我有一個元素可能包含非常大量的數據,但我不希望它破壞頁面佈局,所以我設置max-height: 100pxoverflow:auto,希望滾動條出現時內容不適合。IE8溢出:自動與最大高度

它在Firefox和IE7中都可以正常工作,但是IE8的行爲好像存在overflow:hidden而不是overflow:auto

我試過overflow:scroll,仍然沒有幫助,IE8只是截斷內容而不顯示滾動條。更改max-height聲明到height使溢出工作正常,這是max-heightoverflow:auto的組合破壞的東西。

這也記錄爲official bug in the final, release version of IE8

有沒有解決辦法?現在我使用height而不是max-height,但它留下了大量的空白空間,以防數據不多。

+1

注意:這在IE9(至少在RC)中顯示爲固定 – 2011-02-11 08:35:46

+4

只是後面發現這個問題的ppl的一個註釋,我已經看到在IE8中設置最大高度和溢出在一個div崩潰整個頁面 - 作爲在頁面中保持完全空白,但顯示頁面標題。有趣的樂趣... – James 2011-07-19 09:33:19

回答

71

這是一個非常討厭的錯誤,因爲它影響着我們大量的堆棧溢出與<pre>代碼塊,其中有max-height:600width:auto

它被記錄爲IE8最終版本中的錯誤,無法修復。

http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759

有一個非常,非常哈克CSS解決方法:

http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode

/* 
SUPER nasty IE8 hack to deal with this bug 
*/ 
pre 
{ 
    max-height: none\9 
} 

,當然有條件的CSS如其他人所說的,但我不喜歡的是,因爲這意味着你」在每個頁面請求中重新提供額外的HTML cruft。

3

我看到這記錄爲RC1中的一個固定的錯誤。但是我發現了一個似乎會導致硬性渲染失敗的變體。在嵌套表格中涉及這兩種樣式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
    .calendarBody 
    { 
     overflow: scroll; 
     max-height: 500px; 
    } 
    </style> 
</head> 
<body> 
    <table> 
    <tbody> 
     <tr> 
     <td> 
      This is a cell in the outer table. 
     <div class="calendarBody"> 
      <table> 
       <tbody> 
       <tr> 
        <td> 
        This is a cell in the inner table. 
       </td> 
        </tr> 
      </tbody> 
       </table> 
     </div> 
     </td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html> 
1

重現:

(這崩潰的整個頁面。)

<HTML> 
<HEAD> 
    <META content="IE=8" http-equiv="X-UA-Compatible"/> 
</HEAD> 

<BODY> 
    look: 

    <TABLE width="100%"> 
     <TR> 
      <TD> 
       <TABLE width="100%"> 
        <TR> 
         <TD> 
          <DIV style="overflow-y: scroll; max-height: 100px;"> 
           X 
          </DIV> 
         </TD> 
        </TR> 
       </TABLE> 
      </TD> 
     </TR> 
    </TABLE> 
</BODY> 
</HTML> 

(雖然這工作得很好......)

<HTML> 
<HEAD> 
    <META content="IE=8" http-equiv="X-UA-Compatible"/> 
</HEAD> 

<BODY> 
    look: 

    <TABLE width="100%"> 
     <TR> 
      <TD> 
       <TABLE width="100%"> 
        <TR> 
         <TD> 
          <DIV style="overflow-y: scroll; max-height: 100px;"> 
           The quick brown fox 
          </DIV> 
         </TD> 
        </TR> 
       </TABLE> 
      </TD> 
     </TR> 
    </TABLE> 
</BODY> 
</HTML> 

(而且,瘋狂,那麼,這是否。[無div中的內容。])

<HTML> 
<HEAD> 
    <META content="IE=8" http-equiv="X-UA-Compatible"/> 
</HEAD> 

<BODY> 
    look: 

    <TABLE width="100%"> 
     <TR> 
      <TD> 
       <TABLE width="100%"> 
        <TR> 
         <TD> 
          <DIV style="overflow-y: scroll; max-height: 100px;"> 
          </DIV> 
         </TD> 
        </TR> 
       </TABLE> 
      </TD> 
     </TR> 
    </TABLE> 
</BODY> 
</HTML> 
4
{ 
overflow:auto 
} 

嘗試的div溢出:汽車

2
{max-height:200px, Overflow:auto} 

感謝SRINIVAS玉田,上面的代碼所做的工作對我來說。

1

類似的情況,由js設置maxHeight以適應分配空間的pre元素,寬度100%,溢出自動。如果內容比maxHeight短,並且水平放置,我們就很好。如果調整窗口大小以使內容不再水平放置,將出現一個水平滾動條,但元素的高度會立即跳轉到完整的maxHeight,而不管內容的高度如何。

試過了傑夫提到的各種形式的CSS黑客,但沒有發現任何類似的東西,這不是一個JS錯誤的參數錯誤。

我能找到的最好的選擇是爲ie8選擇毒性:或者降低maxHeight限制,因此元素可以是任何高度(最適合我的情況),或者設置高度而不是maxHeight,所以它總是那麼高,即使內容本身要短得多。非常不理想。 ie9中失去了行爲。

1

僅設置最大高度,不設置溢出。這樣,如果內容大於最大高度,它將顯示滾動條,如果內容小於最大高度,則會縮小。

0

我發現這一點: https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/

該方法已在IE6得到了驗證,並且應在IE5工作。只需更改值以滿足您的需求(代碼註釋了註釋)。在這個例子中,我們在333px 1 IE設置的最大高度,所有符合標準的瀏覽器:

* html div#division { height: expression(this.scrollHeight > 332 ? "333px" : "auto"); /* sets max-height for IE */ }

,這對我的作品完美,所以我決定分享。