CSS绝对定位的div在Firefox中相对父元素的定位

Question

我试图将一个div标签放在表格中。父元素设置了position:relative，而我的div标签使用了position:absolute。我通常在Chrome上进行开发，它可以正常工作，但是当我在Firefox上打开时，我的absolute div标签会忽略其父元素并占据整个页面。

下面是一个在Chrome中有效但在Firefox中无效的示例： http://jsfiddle.net/pdFSh/ 有什么想法吗？

- Romeo Mihalcea

---

相关链接：http://css-tricks.com/absolutely-position-element-within-a-table-cell/ - xec

在任何表格标记内部的<div>都不会通过W3验证器，如果您关心的话。 - gustavohenke

http://css-tricks.com/absolute-positioning-inside-relative-positioning/ - Seazoux

哈哈！我现在就会把它放进去 :) - Seazoux

@gustavohenke，<div> 在 HTML 4/XHTML 1 和 HTML5 中都可以完全有效地用在 <td> 中，<td> 的内容模型允许在所有这些标准中使用任何块级元素。 - Ilya Streltsyn

Answer 1

您需要更改 #absolute 元素的父级元素的 display 属性值：

table tr#body td { display: block; }

- André Dion

---

你的答案很好，但它是如何工作的？你能解释一下吗？ - Shailender Arora

好的。默认情况下，表格单元格的 display 属性为 table-cell。Firefox（错误地—感谢 Ilya Streltsyn）以不同的方式处理表格单元格。将 display: block 设置为指示 Firefox 不再将 td 元素视为表格单元格，而是将其视为块级元素。display: inline-block 也可以同样起作用。 - André Dion

将父元素的 display 属性设置为 block 解决了我类似的问题。 - Andre Elrico

Answer 2

这是Firefox已知的bug(自Firefox 31版本修复)。在修复之前，常见的解决方法是将div嵌套在表格单元格内并设置position: relative，或者将单元格本身的display更改为display:block（将单元格转换为类似div的块框嵌套在匿名表格单元格框中）。第二种方法似乎适用于此情况，因为单元格的高度是固定的。

- Ilya Streltsyn

Answer 3

我通过在CSS的table tr#body td中添加以下内容来解决这个问题：

float: left;
width: 100%;

你现在需要注意边距和填充错误，但可以通过更改元素的 box-sizing 来避免这些错误。

另外，你应该养成在每个 CSS 样式行末尾始终加上分号 ; 的习惯。

编辑：添加 display: block 也像Andre Dion所发表的那样有效。

- JosephGarrone

---

这些属性是不必要的。它们之所以起作用是因为 float: left 设置了 display: block。仅设置 display: block 就足够了。 - André Dion