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

Question

我发现一个有趣的布局问题似乎只出现在Firefox中。

display:table-cell;的元素无法充当position:absolute;后代的位置父级。

也就是说，我很惊讶地发现Firefox有一些问题，就像其他浏览器一样，将一个小小的图标生物放在桌面元素的角落里。

jsFiddle Demonstration

---

所需结果（Chrome）：

Firefox结果：

---

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

Answer 1

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

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

的 Wrapper Solution jsFiddle 的

希望有人能找到一个解决方案，不要求我只为Firefox干扰DOM。

Answer 2

CSS spec明确指出：

  

'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这两种实现都是正确/错误的。你根本不能依赖未定义的行为。 最后，您需要使用您似乎害怕与规范和浏览器兼容的包装器。