在 Firefox 中的 table-cell 元素上定位上下文

Question

通常我们可以设置一个父元素作为子元素absolute定位的上下文，如下：

#parent {
    position: relative;
}

#child {
    position: absolute;
    top: 0;
    left: 0;
}

这一切都很好，但是当父级将其display 属性设置为table-cell 时，它在 Firefox 中不起作用。子元素的定位上下文将是其父元素上方最近的定位祖先。

值得注意的是，这在其他地方任何地方都有效。在 IE8、IE9、Safari、Chrome 和 Opera 中测试。

在这里查看小提琴：http://jsfiddle.net/RZ5Vx/

另外，请参阅this fiddle with the parent's display set to inline-block，它确实适用于 Firefox。

---

那么，这是一个错误吗？如果是这样，有没有办法解决它？

Answer 1

table-cell 应该在 table 内，所以：

看到这个working Fiddle!

div {
    display: table;      /* this line */
    line-height: 28px;
    padding: 0 20px;
    background: #ddd;
    position: relative;
}

注意： 因为你没有table，所以设置它。

您可以看到quirksmode 的显示声明。

---

已编辑

从W3C recommendation :: Tables 读取

表格元素上属性'position'、'float'、'margin-*'、'top'、'right'、'bottom'和'left'的计算值用于表格包装盒和不是桌子盒；所有其他不可继承属性的值都用于表格盒而不是表格包装盒。 （如果表格元素的值不用于表格和表格包装盒，则使用初始值。）

这不是错误，更像是 status-bydesign 的东西！请看this！

---

已编辑

根据问题的要求包括对评论的解决方法：

那么，这是一个错误吗？如果是这样，有没有办法解决它？

可能的解决方法是：

用div 将元素包装成position:relative; See Fiddle!

#wrapper {
    position: relative;
}

注意：最实用的解决方案！

用div 将内部元素包装成position:relative; See Fiddle!

#innerWrapper {
    position: relative;
}

注意：需要在innerWrapper上声明原始元素的一些定义！