css - 带定位的动态表格布局 - firefox 错误？

Question

仅限火狐!我正在使用具有页眉、正文和页脚的绝对定位表格。当页眉或页脚高度动态更改时，中间/正文单元格中的 var 元素必须符合单元格高度。这一切最初都可以在没有动态变化的情况下工作，但是当内部变量发生变化时，它就会失去其高度:100% 的能力。有趣的是:当我将位置 css 移动到表父节点时，它工作正常。

这是一个demo

代码如下:

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

Answer 1

Chrome 比其他浏览器更智能，但这并不意味着其他浏览器有问题(我不是在谈论 IE，好吗？)。 Chrome 只是为您解决了一些错误或其他问题，Google Way。

当您将表格标记视为 div、img 或其他一些标记时，它的行为方式往往与它们相同。

所以在这里我们正在检索它的一个属性:

我只是切换了display:block至 display:table在 child ( <var> )

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