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

Question

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

#parent {
    position: relative;
}

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

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

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

在这里查看 fiddle :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上面写着

The computed values of properties 'position', 'float', 'margin-*', 'top', 'right', 'bottom', and 'left' on the table element are used on the table wrapper box and not the table box; all other values of non-inheritable properties are used on the table box and not the table wrapper box. (Where the table element's values are not used on the table and table wrapper boxes, the initial values are used instead.)

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

---

已编辑

根据问题的要求，包括放在评论上的工作:

So, is this a bug? If so, is there anyway to work around it?

可能的解决方法是:

用 div 包裹元素作为 position:relative; See Fiddle!

#wrapper {
    position: relative;
}

注意:最实用的解决方案!

用 div 包裹内部元素作为 position:relative; See Fiddle!

#innerWrapper {
    position: relative;
}

注意:需要在 innerWrapper 上声明来自原始元素的一些定义!