Fatal编程技术网
  • html/
  • DIV溢出隐藏且高度不在IE9的DOCTYPE HTML标准模式下工作

DIV溢出隐藏且高度不在IE9的DOCTYPE HTML标准模式下工作

html css

DIV溢出隐藏且高度不在IE9的DOCTYPE HTML标准模式下工作,html,css,internet-explorer-9,Html,Css,Internet Explorer 9,我有一个溢出：隐藏的和高度：100%，它在屏幕上显示div内容，并适合窗口的高度 这适用于Chrome和Safari IE9不尊重我的divoverflow:hidden和height:100%，所以它只是扩展div来显示内容 在我的页面上，我有以下doctype <!DOCTYPE HTML> 这应表明符合最新标准 如果我完全删除Doctype，那么所有浏览器中的一切都可以正常工作，除了字体太大，因为没有指定Doctype 有可能发生这种情况的原因吗？ html和body标记

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

这适用于Chrome和Safari

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

在我的页面上，我有以下doctype

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


内容太高，无法适应屏幕的高度，所以添加了滚动条。在IE9中，它不起作用，因为它只是扩展了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>


*{/*重置默认值*/
保证金：0；
填充：0；
}
html，正文{/*首先为容器指定高度*/
身高：100%；
}
桌子
{
身高：100%；
宽度：100%；
边界塌陷：塌陷
}
海德罗先生
{
高度：50px；
}
.侧面板d
{
}
.侧面板div
{
溢出：自动；
身高：100%；
}
.row2
{
}
标题
td 1
td 2含量
太高
高
























































为了适应屏幕的高度，
因此，添加了一个滚动条。在IE9中，它不起作用，因为它只是扩展
DIV的高度
这是我尝试过的方法，它很有效

<!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>
可能您的页面上有什么东西触发了怪癖模式，请尝试设置
（从），或者您可能会发现一些提示。

它似乎应该可以工作。确保DOCTYPE声明上方没有注释或任何类型的代码，因为这也会使IE进入怪癖模式。为了安全起见，还要添加
。

我们能看到小提琴吗？那可能会帮助我们解决你的问题@user1060500：好的，米尔奇，谢谢你指出这个（技术）错误，它对我们试图解决的问题毫无价值。嗯。唯一不同的是，我有一张桌子，高度为100%，tr的高度为100%，div在里面。问题可能出在表格上吗？@user1060500看到我的答案了吗？我补充道，我正在复制你的解决方案，然后与我的解决方案进行比较。我会让你知道我的HTML有点复杂，但基本原理是一样的。好的，我可以复制这个问题。我根据您的示例修改了我的问题，以包括要复制的源HTML。您将看到的一个区别是，在我的示例中有两个TR，第一个是标题TR。您认为如何？@user1060500不，不要编写内联样式，
边框折叠
属性用于表而不是TR，所以只需复制粘贴样式标记之间的内容，我用完整的HTML源代码更新了我的问题，问题仍然存在。我想知道你是否可以复制它？我用完整的HTML源代码更新了我的问题，问题仍然存在。我想知道你是否可以复制它？ 
table, tr, td {
    height: 100%;
    border-collapse: collapse;
}