Firefox 忽略表格单元格中的绝对定位

Posted 2023-03-06

【中文标题】Firefox 忽略表格单元格中的绝对定位

【英文标题】：Firefox ignores absolute positioning in table cells

【发布时间】：2012-02-06 01:27:59

【问题描述】：

我试图在表格单元格中绝对定位一个元素。 TD 有position:relative，元素有position:absolute。

这在所有浏览器中都非常有效，除了 Firefox，它相对于祖先相对容器定位。

你可以在这个小提琴中看到这个复制：http://jsfiddle.net/ac5CR/1/

有谁知道我是否错过了一些可以在 Firefox 中修复该问题的 CSS 设置？

【问题讨论】：

在 Firefox 中，绿色的 indicator div 位于第一行，它应该在 chrome 和 IE 中的第三行。

看起来您正在使用tables for layout。你是吗？

不幸的是。我正在使用 jqGrid，它在内部使用表。我必须在单元格内放置一个指示器。

【参考方案1】：

该元素不是块元素。 添加到样式显示：块，您将获得所需的行为。

【讨论】：

虽然 TD 不再表现得像表格单元格，但它现在确实可以工作......我必须为单元格指定显式高度以与其余单元格对齐。

展开，td 元素的默认显示值通常是“table-cell”（鉴于 Firefox 支持“table-cell”显示值，这很可能是它的默认值）。跨度>

刚刚遇到这个问题 - 这是否意味着您不能在表格布局中positon: absolute？

其实这是一个Firefox bug，已经被修复了（从版本31开始，Firefox会像其他浏览器一样相对于表格单元格定位绝对后代）。

【参考方案2】：

一种可能的解决方法是用另一个 position:relative div 包装 position:absolute 元素。它需要一个额外的 div，这很糟糕，但会给你正确的结果。

示例：http://jsfiddle.net/pTJUk/

注意——这仍然不会给出完全正确的结果，因为position:relative div 将相对于td 中的文本位置——很疯狂，对吧？给单元格一个vertical-align:top 会使它指向 0,0，但当然这可能会以您的设计所需的其他格式为代价。

【讨论】：

我在获取<a> 以扩展相邻单元格时遇到了类似的问题。将<div style="position:relative;> 放入<td> 中，一切正常。到目前为止，我在多个浏览器中都没有遇到任何问题。

【参考方案3】：

这是一个非常古老的 Firefox 错误，在被报告大约 13 年后才被修复！

您可以参考这里的有趣历史： https://bugzilla.mozilla.org/show_bug.cgi?id=63895