html - Firefox 问题：相对定位的表格单元格无法作为父级

Question

我发现了一个有趣的布局问题，似乎只存在于 Firefox 中。

带有 的元素display:table-cell;无法作为带有 的后代的位置父级position:absolute;。

也就是说，我很惊讶地发现 Firefox 在绝对将小图标生物定位到表格单元格元素的角落时存在问题，就像其他浏览器一样。

    jsFiddle 演示

---

期望的结果（铬）：

火狐结果：

---

有趣的是，即使是 IE8 也会产生预期的结果。
  你最喜欢的解决方法是什么？

Answer 1

CSS 规范明确指出：

'position:relative' 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table-caption 元素的影响未定义。

由于未定义，Firefox 将忽略您的相对位置。因此，您.container成为最近定位的祖先，并用于绝对定位的.icon元素。

因此，事实证明，Firefox 和 Chrome 两种实现方式都是一样的。您根本不能依赖未定义的行为。最后，您需要使用您似乎害怕与规范和浏览器兼容的包装器。

Answer 2

到目前为止，我已经找到了蹩脚且显而易见的解决方案。

在 Firefox 中，可以通过在表格单元中添加一个蹩脚的包装<div>器来实现所需的结果。display:block;position:relative

包装解决方案 jsFiddle

希望有人能找到一个不需要我只为 Firefox 干预 DOM 的解决方案。