Firefox问题与display：absolute在表单元格中 [英] Firefox issue with display:absolute in a table cell

问题描述

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

I have found an issue when using absolutely positioned content within a td element. The td element is not being recognised as a positioned element so the content is being positioned relative to the body. This issue is only in FireFox and the expected layout is visible in other browsers - jsfiddle.

做一个小小的挖掘似乎问题与FireFox使用 display：table-cell 作为表格单元格的默认显示类型相关。我可以通过将显示更改为 block 或通过添加一个 div 容器作为定位容器来解决这个问题内容。

Doing a little digging around it seems that the issue is related to FireFox using display:table-cell as the default display type for table cells. I can resolve the issue by changing the display to block or by adding a div container to act as a positioned container to the content.

有没有理由避免将单元格的显示类型更改为 block ？我更喜欢使用这种方法，而不是添加额外的元素来纠正一个浏览器中的问题。

Is there any reason to avoid changing the display type of the cell to block? I would prefer to use this method rather than adding additional elements to correct an issue in one browser.

这不是与桌面单元格中的绝对格式或为什么显示：

This is not the same issue as described in either div style absolute in a table cell or Why "display: table-cell" is broken when "position: absolute".

推荐答案

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

If you set the display of the cell to block it will get wrapped in an anonymous table cell. The resulting CSS box tree is the same as if you created a <div> inside the cell and set all the cell's styles and attributes on that block.

这对于许多目的可能是好的。如果单元格有一个rowspan或colspan（因为那些不意味着块上的任何东西），或者如果单元格有你希望参与边框折叠的边框样式，或者如果你有两个这样的单元格在旁边，它会破坏（因为这两个块将被包裹在一个表单元格中，而不是在两个单独的表格单元格中）。有可能是其他情况下行为将是意想不到的。但是如果你对风格和内容有足够的控制，而不是对单元格做太多的风格，这将工作。

This might be OK for many purposes. It'll break if the cell has a rowspan or colspan (because those don't mean anything on blocks) or if the cell has border styles that you expect to take part in border collapsing or if you have two such cells next to each other (because then the two blocks will be wrapped in a single table cell, not in two separate table cells). There are probably other situations where the behavior will be unexpected. But if you have enough control over the styles and content and aren't doing too much styling of the cell, this will work.

这篇关于Firefox问题与display：absolute在表单元格中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！