在IE9 DOCTYPE HTML標準模式下DIV溢出隱藏和高度不工作

我有一個<div>與溢出：隱藏和height:100%它顯示在屏幕上的div內容，並適合窗口的高度。在IE9 DOCTYPE HTML標準模式下DIV溢出隱藏和高度不工作

這適用於Chrome和Safari。

IE9，不尊重我的div overflow:hidden和height:100%所以它只是展開div顯示內容。

在我的網頁，我有以下的doctype

<!DOCTYPE HTML>

這應該指出的最新標準的遵守情況。

如果我完全刪除了Doctype，那麼在所有瀏覽器中一切正常，除非字體太大，因爲沒有指定doctype。

這可能會發生什麼原因？ html和body標籤被指定爲高度：在CSS樣式表100％

<div style="overflow:hidden;height:100%"> 
content too tall to fit height of the screen, so a scroll bar is added. In IE9 it doesn't work because it just extends the height of the DIV 
</div>

編輯：我已經包含了完整的HTML，可完全在IE9重現問題

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     * { /* Resetting the defaults */ 
      margin: 0; 
      padding: 0; 
     } 

     html, body { /* Assigning Height To Containers First */ 
      height: 100%; 
     } 

     table 
     { 
     height:100%; 
     width:100%; 
     border-collapse: collapse 
     } 

     .headerRow 
     { 
     height:50px; 
     } 

     .sidePanelTd 
     { 


     } 

     .sidePanelDiv 
     { 
     overflow:auto; 
     height:100%; 
     } 

     .row2 
     { 

     } 

    </style> 
</head> 
<body style="background-color:White;overflow:auto"> 
    <table border=0 cellpadding=0 cellspacing=1 id="mainTable"> 
    <tr class="headerRow"> 
     <td valign=top colspan=2>Header 
     </td> 
    </tr> 

    <tr class="row2"> 
     <td> 
     td 1 
     </td> 

     <td class="sidePanelTd"> 
      <div class="sidePanelDiv"> 
       td 2 content <br>too <br>tall <br><br><br><br><br><br> 
       <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
       <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
       <br><br><br><br><br><br><br><br><br><br><br><br>to fit height of the screen, 
       so a scroll bar is added. In IE9 it doesn't work because it just extends 
       the height of the DIV 
      </div> 
     </td> 
    </tr> 

</table> 

</body> 
</html>

來源

2013-03-11 user1060500

我們能看到小提琴嗎？這可能有助於我們解決您的問題！ – 2013-03-11 15:26:03

什麼是小提琴？ – user1060500 2013-03-11 15:26:40

@ user1060500：[JSFiddle]（http://jsfiddle.net） – 2013-03-11 15:27:29

這是我已經試過和它的作品

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     * { /* Resetting the defaults */ 
      margin: 0; 
      padding: 0; 
     } 

     html, body { /* Assigning Height To Containers First */ 
      height: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div style="overflow:hidden;height:100%"> 
     content <br>too <br>tall <br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br>to fit height of the screen, 
     so a scroll bar is added. In IE9 it doesn't work because it just extends 
     the height of the DIV 
    </div> 
</body> 
</html>

當你評論，你應該添加此

table, tr, td { 
    height: 100%; 
    border-collapse: collapse; 
}

來源

2013-03-11 15:29:13

嗯。唯一不同的是我有一個高度爲100％的桌子，高度爲100的桌子，裏面有div。問題是桌子嗎？ – user1060500 2013-03-11 15:42:21

@ user1060500查看我的回答我加了 – 2013-03-11 15:45:20

好吧，我正在努力複製您的解決方案，然後比較與我有什麼不同。我會讓你知道，因爲我的HTML稍微複雜一些，但基礎是一樣的。 – user1060500 2013-03-11 15:48:59

也許你的網頁的某些觸發怪異模式，嘗試設置<meta http-equiv="X-UA-Compatible" content="IE=edge" />（從this post），或者您可能會發現this page一些提示。

來源

2013-03-11 15:29:27 Simon

我用完整的HTML源更新了我的問題，並且存在問題仍然。我想知道你是否可以複製它？ – user1060500 2013-03-11 16:50:54

它似乎應該work.Make確保沒有任何評論或DOCTYPE聲明之上的任何類型的代碼，因爲這也使IE瀏覽器進入怪癖模式。另外加上<meta http-equiv="X-UA-Compatible" content="IE=edge" />只是爲了安全。

來源

2013-03-11 15:31:27 Ronophobia

我用完整的HTML源更新了我的問題，問題仍然存在。我想知道你是否可以複製它？ – user1060500 2013-03-11 16:49:17

在IE9 DOCTYPE HTML標準模式下DIV溢出隱藏和高度不工作

回答

相關問題