我发现了一个有趣的布局问题，似乎只存在于 Firefox 中。
带有 的元素display:table-cell;无法作为带有 的后代的位置父级position:absolute;。
也就是说，我很惊讶地发现 Firefox 在绝对将小图标生物定位到表格单元格元素的角落时存在问题，就像其他浏览器一样。
期望的结果（铬）：
火狐结果：
有趣的是，即使是 IE8 也会产生预期的结果。
你最喜欢的解决方法是什么？
问问题
52 次
2 回答
0
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 两种实现方式都是一样的。您根本不能依赖未定义的行为。最后，您需要使用您似乎害怕与规范和浏览器兼容的包装器。
于 2013-08-24T10:23:40.873 回答
0
到目前为止，我已经找到了蹩脚且显而易见的解决方案。
在 Firefox 中，可以通过在表格单元中添加一个蹩脚的包装<div>器来实现所需的结果。display:block;position:relative
希望有人能找到一个不需要我只为 Firefox 干预 DOM 的解决方案。
于 2013-08-24T03:29:37.513 回答