在 IE9 中的 DOCTYPE HTML 标准模式下，DIV 溢出隐藏和高度不起作用答案

【问题标题】：DIV overflow hidden and height not working in DOCTYPE HTML standards mode in IE9在 IE9 中的 DOCTYPE HTML 标准模式下，DIV 溢出隐藏和高度不起作用
【发布时间】：2013-03-11 15:23:26
【问题描述】：

我有一个带有溢出：隐藏的<div> 和一个height:100%，它在屏幕上显示 div 内容并适合窗口的高度。

这适用于 Chrome 和 Safari。

IE9，不尊重我的 div overflow:hidden 和 height:100% 所以它只是扩展 div 来显示内容。

在我的页面上，我有以下文档类型

<!DOCTYPE HTML>

这应表明符合最新标准。

如果我完全删除 Doctype，那么在所有浏览器中一切正常，除了字体太大，因为没有指定 doctype。

这可能发生的任何原因？ html 和 body 标签在 css 样式表中指定为 height: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>

【问题讨论】：

我们可以看看小提琴吗？这可能会帮助我们解决您的问题！
@user1060500: JSFiddle
好的 Milche，感谢您指出这个（技术）错误，它对我们在这里尝试解决的问题毫无价值。

标签： html css internet-explorer-9

【解决方案1】：

这是我尝试过的，它有效

<!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;
}

【讨论】：

嗯。我真正拥有的唯一区别是我有一个高度为 100% 的表格和一个高度为 tr 的表格：100% div 在里面。问题可能出在桌子上吗？
@user1060500 查看我添加的答案
好的，我正在复制您的解决方案，然后将任何差异与我的解决方案进行比较。我会让你知道，因为我的 HTML 有点复杂，但基础是一样的。
好的，我可以复制这个问题。我根据您的示例修改了我的问题以包含要复制的源 HTML。您将看到的一个区别是，在我的示例中有两个 TR，第一个是标题 tr。你怎么看？
@user1060500 不，不要写内联样式，border-collapse 属性是用于表格而不是 tr，所以只需在样式标签之间复制粘贴即可

【解决方案2】：

也许您页面上的某些内容触发了 quirksmode，请尝试设置 <meta http-equiv="X-UA-Compatible" content="IE=edge" />（来自 this post），或者您可能会在 this page 上找到一些提示。

【讨论】：

我用完整的 HTML 源代码更新了我的问题，但问题仍然存在。我想知道你是否可以复制它？

【解决方案3】：

它似乎应该可以工作。确保在 DOCTYPE 声明之上没有 cmets 或任何类型的代码，因为这也会使 IE 进入怪癖模式。为了安全起见，还要添加<meta http-equiv="X-UA-Compatible" content="IE=edge" />。

【讨论】：

我用完整的 HTML 源代码更新了我的问题，但问题仍然存在。我想知道你是否可以复制它？