IE7 DIV 扩展以适合 TABLE，忽略 HEIGHT% 指令
我真的很感谢能帮助我的固定标题表格在 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 单位，它会滚动，但当然不再正确调整大小。
我正在使用严格的文档类型。我的表实际上包含表格数据，通常有 10 列和 200 行，因此表在语义上是准确的。当然，这张表实际上还有更多内容。
我不想使用 javascript 来实现动态尺寸，除非它非常简单以至于防弹，因为我总是会遇到愚蠢的缺陷（哦，是的，当你将鼠标悬停在超链接上时，我没有想到要重新评估大小，并且行高变化等）。
谢谢你， 香农
I'd really appreciate a hand getting my fixed-header table scrolling in IE7.
In IE7, my tall data table is forcing its containing DIV to expand vertically, and preventing that DIV's scrollbar from showing. I'm using the excellent cross-browser (including IE7) scrolling, fixed-headers table layout solution from:
http://www.sitepoint.com/forums/showthread.php?t=615364&page=3
, but I've modified it so that the table fills the page.
Here's how that looks in-practice:
<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>
I'm happy with how the headers and scrolling work in FF and IE8. Debug kit in IE7 shows that #results has the desired height, but both DIV and TABLE share the same extremely tall value, where DIV should actually be the height of #results. If I change DIV height from % to px units, it scrolls, but of course no longer resizes properly.
I'm using strict doctype. My table actually contains tabular data, typically 10 columns and 200 rows, so a table is semantically accurate. There's actually more content around this table of course.
I'd prefer not to use javascript for dynamic dimensions, unless it is so simple that it's bulletproof, since I always end up with stupid defects (oh, yeah, I didn't think to re-evaluate size when you hover over hyperlinks and the line height changes, etc.).
Thank you,
Shannon
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
通过将 DIV 包装在 a: 中（同时保留现有的样式规则），
问题就得到了解决。 IE7内部再次罢工。可能有一种更优雅的方法来解决它，不需要更多的结构标记，如果您知道的话，我很想听听。
香农
By wrapping DIV (while keeping existing style rules) in a:
the issue is resolved. IE7 internals strike again. There is probably a more elegant way to solve it that doesn't require more structural markup, I'd love to hear it if you know of it.
Shannon