1

通常，我们可以将父元素设置为子元素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 parent's displayset toinline-block，它在 Firefox 中有效。

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

4

1 回答 1

2

Atable-cell意味着在 a 内table，所以：

看到这个工作小提琴！

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

注意： 由于您没有table在其中设置它。

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

已编辑

来自W3C 推荐 :: Tables它读取

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

这不是一个错误，更像是一个状态设计的东西！请看这个！

已编辑

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

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

可能的解决方法是：

用divas position:relative; See Fiddle 包裹元素！

#wrapper {
    position: relative;
}

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

用divas position:relative; See Fiddle 包裹内部元素！ 

#innerWrapper {
    position: relative;
}

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

于 2012-06-05T18:31:58.880 回答