Question

仅限Firefox！我使用具有标题，正文和页脚的绝对定位表。当页眉或页脚高度动态更改时，中间/正文单元格中的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只是为您解决了一些bug或其他问题，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>

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

1 个答案: