Firefox css表格单元格不'；t像其他浏览器一样响应position:absolute

我一直在用Javascript为应用程序窗口创建布局系统。。。Javascript生成下面列出的代码

一切都很好，除了Firefox对CSS表的规则似乎与其他浏览器不同

Webkit浏览器似乎将调整CSS表格单元格元素大小的上下文设置为最接近的相对/绝对位置的父元素，就像普通元素一样，因此我们可以将每个单元格视为一个新上下文，用于绝对调整大小和位置

Firefox似乎没有这样做

下面是示例代码：

<div class="header"></div>
<div class='table'>
    <div class='row'>
        <div class='cell'>
            <div class='wrap'>
                <div class='pane'>
                Content here that is long enough to wrap at the sides. Content here that is long enough to wrap at the sides. Content here that is long enough to wrap at the sides.  And still hit the bottom.
                </div>
            </div>
        </div>
        <div class='cell' style='background-color:orange; width:230px;'>
            cell2
        </div>
    </div>
</div>

可在此处查看：

在Webkit（Safari/Chrome）与Firefox/Mozilla的对比中可以看到这一点

我尝试在单元格中添加.wrap元素，但它似乎无助于重置上下文。我是不是想错了？SO上的其他帖子似乎暗示单元格或.wrap必须是内联块，但这些似乎也不起作用

以下是与此相关的一些其他链接：

在这一点上，我考虑不支持firefox，因为我花了很多时间试图修复它。但这看起来很愚蠢，因为除了基本布局之外，其他所有的东西都可以在浏览器中正常工作

感觉上要么是我遗漏了一个神奇的子弹，要么是Firefox存在着深层次的设计问题，这是不允许的

---

我认为JSFIDLE通过使用iFrame和在其布局中完全没有表格来解决这个问题，但这确实意味着可以避免一些错误。

您的基本问题是，在Gecko中的表格单元格上指定

位置：relative

，并不会使该单元格成为绝对定位的子单元格的包含块。看

规范对此的理解是：

“位置：相对”对表行组的影响， 表格页眉组、表格页脚组、表格行、， 表列组、表列、表单元格和表标题 元素未定义

---

短期内，您要做的是将您的

位置：relative

放在单元格内的一个块上（例如，您的“wrap”块）。

是的，这正是问题所在。它应该被定义

那么，是否决定Gecko渲染器不会像其他渲染器那样为表的子级（即有意义的位，如单元格，可能希望请求100%的宽度和高度）重置大小上下文

---

似乎电池应该是新尺寸的主空间…

这怎么不是一个更受关注的问题？

.header {
    height: 50px;
    width: 100%;
    background: blue;
}
.table {
    width:100%;
    height:200px;
    display:table;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    background-color:red;
    position:relative;
}
.wrap {
    display:block;
    position:absolute;
    background-color:purple;
    width:100%;
    height:100%;
}
.pane {
     background-color:green;
    height:100%;
    width:100%;
    position:absolute;    
}