Css 带定位的动态表格布局-firefox bug？

仅限Firefox！Im使用具有页眉、正文和页脚的绝对定位表。动态更改页眉或页脚高度时，中间/正文单元格中的var元素必须符合单元格高度。这一切最初都是在没有动态变化的情况下工作的，但是当内部变量发生变化时，它的高度就会降低：100%的能力。Funnt thing tho：当我将位置css移动到表父节点时，效果很好

这是一个

代码如下：

<!-- WRONG result -->
<!-- Parent does not hold positional css -->
<div style="">
<table style="position:absolute;top:200px;left:100px;height:300px;width:300px;background:black">
<tr><td style="height:1%;color:#FFF" onclick="this.innerHTML+=this.innerHTML">Click Me!<br></td></tr>
<tr><td style="padding:0px;background:green">
<var style="height:100%;width:100%;display:block;background:red">With style.position set on table.<br><br>Once table cells height are dynamically altered, this var element (or div) looses its ability to measure height:100%</var>
</td></tr>
<tr><td style="height:20px;color:#FFF" onclick="this.innerHTML+=this.innerHTML">Click Me!<br></td></tr>
</table>
</div>

<!-- RIGHT result -->
<!-- Parent holds positional css -->
<div style="position:absolute;top:200px;left:500px;">
<table style="height:300px;width:300px;background:black">
<tr><td style="height:1%;color:#FFF" onclick="this.innerHTML+=this.innerHTML">Click Me!<br></td></tr>
<tr><td style="padding:0px;background:green">
<var style="height:100%;width:100%;display:block;background:red">With style.position set on table.parentNode<br><br>This one behaves how i expect it to</var>
</td></tr>
<tr><td style="height:20px;color:#FFF" onclick="this.innerHTML+=this.innerHTML">Click Me!<br></td></tr>
</table>
</div>

点击我

在表格上设置style.position。

一旦表格单元格高度被动态更改，此变量元素（或div）将失去其测量高度的能力：100%
点击我

点击我

在table.parentNode上设置了style.position后，此节点的行为符合我的预期
点击我

Chrome浏览器比其他浏览器更智能，但并不意味着其他浏览器被窃听（我不是说IE，好吗？）。Chrome只是为你掩盖一些bug，谷歌方式

当您像对待div、img或其他一些标记一样对待表标记时，它的行为往往与它们相同

因此，我们在这里检索它的一个属性：

我只是在子对象（

）中将

显示：块切换到
显示：表


点击我

在表格上设置style.position。

一旦表格单元格高度被动态更改，此变量元素（或div）将失去其测量高度的能力：100%
点击我

谢谢你的帮助-成功了！！哈哈。。。这是处理此问题的推荐/安全方法，还是一种利用漏洞或黑客行为？它是安全的。但我不知道如何在IE6XD上使用它
<!-- LEFT result -->
<div style="">
<table style="position:absolute;top:200px;left:100px;height:300px;width:300px;background:black">
<tr><td style="height:1%;color:#FFF" onclick="this.innerHTML+=this.innerHTML">Click Me!<br></td></tr>
<tr><td style="padding:0px;background:green">
<var style="height:100%;width:100%;display:table;background:red">With style.position set on table.<br><br>Once table cells height are dynamically altered, this var element (or div) looses its ability to measure height:100%</var>
</td></tr>
<tr><td style="height:20px;color:#FFF" onclick="this.innerHTML+=this.innerHTML">Click Me!<br></td></tr>
</table>
</div>