Question

我一直在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>

和css：

.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;    
}

可在此处查看：http://jsfiddle.net/XmUZ7/3/

在Webkit（Safari / Chrome）和Firefox / Mozilla中查看的内容就是问题所在。

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

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

Positioning context on table-cell element in Firefox

css absolute position inside table-cell: strange Firefox display

CSS Positioning Absolute within table cells not working in Firefox

https://bugzilla.mozilla.org/show_bug.cgi?id=203225

此时我正在考虑不支持Firefox，因为我花了这么多时间来修复它。但这看起来很愚蠢，因为除了基本布局之外，其他一切都在浏览器中运行良好！

感觉就像有一个神奇的子弹我错过了，或者Firefox有很深的设计问题，不允许这样做。

我认为JSFiddle通过使用iframe并且在其布局中根本没有表来解决这个问题，但它确实意味着存在可以避免的错误。

Answer 1

您的基本问题是在Gecko中的表格单元格上指定position: relative不会使该单元格成为绝对定位的孩子的包含块。见https://bugzilla.mozilla.org/show_bug.cgi?id=63895

规范对此的看法是http://www.w3.org/TR/CSS21/visuren.html#choose-position：

'position：relative'对table-row-group的影响， table-header-group，table-footer-group，table-row， table-column-group，table-column，table-cell和table-caption 元素未定义。

短期内您想要做的是将position:relative放在单元格内的一个块上（例如您的“换行”块）。

Answer 2

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

那么，是否决定Gecko渲染器不会像其他渲染器那样重置表的子节点的大小调整上下文（IE是有意义的位，如单元格，可能要求100％的宽度和高度）？

看起来细胞应该成为新尺寸的主权空间......

Firefox css表格单元格不像其他位置为绝对值的浏览器一样响应

2 个答案: