0

我有一个<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>
4

3 回答 3

2

这是我尝试过的并且有效

<!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-11T15:29:13.907 回答
0

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

于 2013-03-11T15:31:27.097 回答
0

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

于 2013-03-11T15:29:27.900 回答