如何在 TD 或 TH 中定位元素而不在 Firefox 中收到警告？答案

【问题标题】：How to position elements inside a TD or TH without getting a warning in Firefox?如何在 TD 或 TH 中定位元素而不在 Firefox 中收到警告？
【发布时间】：2014-12-05 23:10:25
【问题描述】：

我在表格标题单元格中使用了绝对定位的元素。为此，必须将 TH 自身定位，使其成为子元素的 offsetParent（在我的情况下，使用 position:relative）。不幸的是，当前的 Firefox 版本似乎会在 TD 或 TR 被赋予静态以外的位置时发出警告。

使用以下最小表格 HTML

<table>
<tr><th>head</th></tr>
<tr><td>cell</td></tr>
</table>

以及以下最基本的 CSS 规则

th { position: relative }  // either of these is enough
td { position: relative }  // to trigger the warning
table { border-collapse: collapse }

此警告出现在 Firefox 30 和 32 的控制台中：

现在支持表行和行组的相对定位。此站点可能需要更新，因为它可能依赖于此功能没有效果。

（表格边框分开时不会出现警告）

此消息的来源是Firefox's table layout code：

/* static */ void
nsTableFrame::RegisterPositionedTablePart(nsIFrame* aFrame)
{
  // Supporting relative positioning for table parts other than table cells has
  // the potential to break sites that apply 'position: relative' to those
  // parts, expecting nothing to happen. We warn at the console to make tracking
  // down the issue easy.

因此，即使我们没有做错任何事情，我们似乎也会收到此警告，因为其他网站可能会依赖 position 规则执行“无事”。有没有办法摆脱这个烦人的警告？它基本上是在告诉我：警告，你所做的确实有效！

【问题讨论】：

即使您可以摆脱警告消息，但这并不意味着它会让position: relative 处理表格单元格。根据 CSS 级别 2 规范，position: relative 对表格单元格的影响，... 未定义。
@HashemQolami 是的，但警告本身和源评论说 FF 现在支持定位表部件。源评论还表明，仅定位“表格部件除了表格单元格”可能会导致破损，我没有这样做。
您的问题似乎已在以下主题中得到解答：stackoverflow.com/questions/5148041/…

标签： html css firefox warnings css-position

【解决方案1】：

你试过了吗？

<table>
<tr><th><span class="pos1">head</span></th></tr>
<tr><td><span class="pos2">cell</span></td></tr>
</table>

css:

.pos1{
position:absolute;
top:25px /* example*/
}

.pos2{
position:absolute;
top:10px /* example*/
}

【讨论】：

并非如此。在您的示例中，SPAN 元素将相对于 BODY 定位，这不是我需要的。
即使给 th 和 td 添加相对位置？
是的，但是我再次收到警告 :) 无论如何，这似乎是 Firefox 中的一个错误，并且已经提交了一个补丁：bugzilla.mozilla.org/show_bug.cgi?id=1081683

【解决方案2】：

我得到了同样的警告，并通过将定位应用于 th 或 td 内的 div 而不是直接应用于 td 或 th 来解决它。不知道为什么它在乎，但现在我不需要再看到它了。

td div{position:relative;}

<table>
  <tr>
    <td>
      <div></div>
    </td>
  </tr>
</table>

【讨论】：