在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溢出隐藏和高度不工作

回答

相关问题