Question

通常，我们可以将父元素设置为子absolute定位的上下文，如下所示：

#parent {
    position: relative;
}

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

这一切都运行正常，但当父级display属性设置为table-cell时，它在Firefox中无法正常工作。子元素的定位上下文将是其父元素上方最接近的祖先。

值得注意的是，无处不在。在IE8，IE9，Safari，Chrome＆amp;戏。

请参阅此处的小提琴：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。

EDITED

从W3C recommendation :: Tables读取

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

这不是一个错误，更像是一个 status-bydesign 的东西！请参阅this！

EDITED

要根据问题的要求包含评论中的工作：

所以，~~这是一个错误吗？如果是这样，~~无论如何都要解决它？

可能解决：

使用div作为position:relative; See Fiddle!
包裹元素
#wrapper { position: relative; }

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

使用div position:relative; See Fiddle!
包裹内部元素
#innerWrapper { position: relative; }

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

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

1 个答案:

EDITED

EDITED