html - Firefox 问题 : Relative-positioned Table-cell Fails to Serve as Parent

Question

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

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

也就是说，当我得知 Firefox 像其他浏览器一样将一个小图标绝对定位到表格单元格元素的 Angular 落时，我感到很惊讶。

jsFiddle Demonstration

---

期望的结果(Chrome):

Firefox 结果:

---

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

Answer 1

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

在 Firefox 中可以通过添加一个蹩脚的包装器来实现预期的结果 <div>与 display:block;和 position:relative在表格单元格内应用。

Wrapper Solution jsFiddle

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