Firefox显示问题：表格单元格中的绝对值

Question

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

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

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

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

Answer 1

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

这可能有很多用途。如果单元格有一个rowpan或colspan（因为那些在块上没有任何意义），或者如果单元格具有您期望参与边框折叠的边框样式，或者如果您有两个这样的单元格彼此相邻，它将会中断（因为这两个块将被包装在单个表格单元格中，而不是两个单独的表格单元格中。可能还有其他情况会出现意外行为。但是如果你对样式和内容有足够的控制权并且没有对单元格做太多样式，那么这将有效。

Answer 2

您是否尝试将TD的位置明确设置为相对位置？

这应该重置定位。实际上，这是正确的行为，你应该得到的，不应该只与TD有关，但你知道，浏览器很有趣。

有关您需要明确设置的详细信息，请检查：
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

...

<强>更新

这个回答建议尝试一个选项。它的编写早于接受的答案，并且不会因为存档原因而被删除，因为对于那些来自搜索引擎的人来说，这是另一个相关的可能性，但问题略有相似但并非相同。感谢您的理解。