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

Posted 2023-03-06

【中文标题】在 Firefox 中的 table-cell 元素上定位上下文

【英文标题】：Positioning context on table-cell element in Firefox

【发布时间】：2012-06-09 18:59:57

【问题描述】：

通常我们可以设置一个父元素作为子元素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。

---

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

【问题讨论】：

你不能在普通的TD 中定位元素，所以我认为浏览器引擎也不会让你用table-cell 来做。

@DA - 但这在其他任何地方都有效。这只是其他人的幸运错误吗？

您不是第一个想要这样做的人，请参阅：***.com/questions/10900433/…。点击我的链接，直到看到 Firefox 错误报告。

【参考方案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上声明原始元素的一些定义！

【讨论】：

这些都不能回答这个问题。我特别希望元素显示为table-cell。不。它确实 not 必须在一个表中，这甚至无助于解决这个问题：jsfiddle.net/RZ5Vx/3

解决问题并将相对位置设置为table 或将表格单元格with a div 设置为位置：相对。

我只提供了测试用例。在现实世界中，我需要几个相邻的元素来填充可用宽度，然后在其中放置一些东西。我显然只能在 table-cell 元素本身上做到这一点。

@Joseph Silber，使用有关该主题的官方文档编辑了答案。很抱歉，如果这不符合您的目标，但事实就是如此。

@Joseph Silber，我可以补充一点，我过去对这个问题感到沮丧，并且由于之前的阅读来处理这个主题，我已经提供了足够快的答案，我得出的结论是table-cell 是相对于父 table 的定义，因此需要一个包装器来解决此类问题。