CSS 显示 :table and display:table-cell alternative for fixed widths

Question

我想我已经发现了一些非常棒的东西 display:table 和 display:table-cell 属性使导航更具响应性和流畅性，将 display:table 应用于 ul with table-layout: fixed;并且 li 给出了 display:table-cell 所有添加的行都完美地适合 ul，无论边框或任何其他添加的元素(与基于百分比的宽度不同)，不需要 float 并且可以追溯到 IE8，这使得交叉最小化浏览器兼容性样式。

不幸的是，Firefox 决定不能将位置应用于显示为表格单元格的元素，这意味着所讨论的元素不能是另一个元素的父元素，例如...绝对定位。这最终意味着 Firefox 将居中并 float 您的二级导航垂直附加到 body 标签，或背景中具有正确位置的其他内容。 (有点可笑的是，这可以追溯到 IE8，但不适用于 Firefox)。

无论如何，我离题了。

有没有人找到一种合适的替代方法，不使用基于百分比的宽度来解决这个问题？

提前干杯。

Answer 1

对于 FF 绝对定位，您可能不需要重置特定的 left 坐标，也不需要重置 top 坐标，当您想在屏幕区域中看到您的元素时。

参见 this example 其中 top 和 left 留给 auto 。

我添加了一个 box-shadow ，所以你可以看到每个元素 ul 或 li 的位置。

然后您可以决定处理 padding 和 margin 而不是坐标。