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

Question

我在表头单元格中使用绝对定位的元素。为此，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 的控制台中:

Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.

(当表格边框保持独立时，不会出现警告)

这条消息的来源是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 规则“什么都不做”。有没有办法摆脱这个烦人的警告？它基本上是在告诉我:警告，你所做的事情确实有效!

Answer 1

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

td div{position:relative;}

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