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

Question

仅限火狐！我使用具有页眉、正文和页脚的绝对定位表。当页眉或页脚高度动态改变时，中间/正文单元格中的 var 元素必须符合单元格高度。这一切最初都是在没有动态变化的情况下工作的，但是当改变内部变量时，它会失去它的 height:100% 能力。有趣的事情：当我将位置 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>

Answer 1

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

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

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

我只是在孩子（）中切换display:block到display:table<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>