css – 高度100%不适用于Internet Explorer 8中的DIV标记

我有以下代码用于显示带有滚动结果部分的搜索工具.在IE中代码工作正常:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html style="background:black;height:100%;width:100%;">
    <head>
      <title>Report</title> 
    </head>
    <body style="background:black;">
      <table HEIGHT="100%" WIDTH="100%" style="background:red;">
      <tr>
      <td>
        Search Area  
      </td>
      </tr>
      <tr>
      <td HEIGHT="100%" WIDTH="100%" style="background:orange;">
        <div style="overflow-y:scroll;height:100%;">
          <table style="width:100px;height:1000px;">
          <tr>
          <td style="background:white;">
            Results Area
          </td>
          </tr>
          </table>
        </div>      
      </td>
      </tr>
      </table>
    </body>
    </html>

但是当我通过添加以下内容将元标记设置为使用IE8格式时:

<meta http-equiv='X-UA-Compatible' content='IE=edge' />

底部DIV标记扩展到页面之外.我已经尝试了很多选项但是没有实际指定值的高度就无法找到解决方法.这不起作用,因为我希望页面占据屏幕的100%,无论浏览器窗口的大小.

任何帮助将非常感激.

这个metatag可以实现正确的CSS渲染,并且在CSS中 – 按设计 – 高度:100% basically doesn’t work.

您需要为元素的每个祖先赋予特定高度,包括< body>,< table>,< tr>甚至< tbody>由解析器自动插入的元素.

无论如何,这种布局可以更简单的方式实现:

.topBanner {
    position:absolute; position:fixed; 
    height:2em; 
    top:0; left:0; width:100%;
}
body {padding-top: 2em}

这将在IE6中很好地降级,与溢出不同,它将在Mobile Safari中正常工作.

相关文章
相关标签/搜索