css - 显示 :absolute in a table cell 的 Firefox 问题

Question

我在 td 元素中使用绝对定位的内容时发现了一个问题。 td 元素未被识别为定位元素，因此内容是相对于 body 定位的。此问题仅在 FireFox 中存在，预期的布局在其他浏览器中可见 - jsfiddle .

仔细研究后发现问题似乎与 FireFox 使用 display:table-cell 作为表格单元格的默认显示类型有关。我可以通过将显示更改为 block 或添加 div 容器作为内容的定位容器来解决此问题。

是否有理由避免将单元格的显示类型更改为block？我更愿意使用此方法而不是添加其他元素来更正一个浏览器中的问题。

这与 div style absolute in a table cell 中描述的问题不同或 Why "display: table-cell" is broken when "position: absolute" .

Answer 1

如果将单元格的显示设置为block它将被包裹在一个匿名表格单元格中。生成的 CSS 框树与创建 <div> 相同。在单元格内并在该 block 上设置所有单元格的样式和属性。

这对于许多用途来说可能没问题。如果单元格具有 rowspan 或 colspan(因为它们在 block 上没有任何意义)，或者如果单元格具有您希望参与边框折叠的边框样式，或者如果您有两个这样的单元格彼此相邻，它将中断(因为这两个 block 将被包裹在一个单个表格单元格中，而不是两个单独的表格单元格中)。在其他情况下，行为可能会出乎意料。但是，如果您对样式和内容有足够的控制权并且没有对单元格进行过多的样式设置，那么这将起作用。