Question

我非常感谢能够让我的固定标题表在IE7中滚动。

在IE7中，我的高数据表强制其包含DIV垂直扩展，并阻止显示DIV的滚动条。我正在使用优秀的跨浏览器（包括IE7）滚动，固定标头表格布局解决方案来自： http://www.sitepoint.com/forums/showthread.php?t=615364&page=3 ，但我修改了它，以便表填充页面。

以下是实践中的表现：

<style>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
#results { position: absolute; top: 2em; bottom: 0; width: 100%; }
#results div { width: 100%; height: 100%; overflow: auto; overflow-x: hidden; }
#results table { width: 100%; }
#results table th p { position: absolute; top: -2em; }
</style>
<body>
  <div id='results'> <!-- provides position referece to headers -->
    <div>            <!-- scrolls the table it contains -->
      <table>        <!-- incorrectly expands parent div in IE7 -->
        <tr><th><p>FIXED-HEADER HERE</p></th></tr>
        <tr><td>TALL CONTENT HERE</td></tr>
      </table>
    </div>
  </div>
</body>

我对FF和IE8中标题和滚动的工作原理感到满意。 IE7中的调试工具包显示#results具有所需的高度，但DIV和TABLE共享相同的极高值，其中DIV实际上应该是#results的高度。如果我将DIV高度从％更改为px单位，则会滚动，但当然不再正确调整大小。

我正在使用严格的doctype。我的表实际上包含表格数据，通常是10列和200行，因此表格在语义上是准确的。当然，这个表格实际上有更多的内容。

我宁愿不使用javascript作为动态尺寸，除非它是如此简单以至于它是防弹的，因为我总是最终有愚蠢的缺陷（哦，是的，我没想到当你悬停时重新评估尺寸超链接和行高变化等。）。

谢谢你，香农

Answer 1

将DIV（同时保留现有的样式规则）包装在：

中

<div style="position: absolute; height: 100%; width: 100%;" } ></div>

问题已解决。 IE7内部再次罢工。可能有一种更优雅的解决方法，不需要更多的结构标记，如果你知道的话，我很乐意听到。

香农

IE7 DIV扩展为适合TABLE，忽略HEIGHT％指令

1 个答案: