Question

可能重复：
Does Firefox support position: relative on table elements?

Firefox是否忽略了表格单元格的相对定位？

我正在尝试将绝对定位元素嵌套在相对定位的表格单元格中，但Firefox忽略了表格单元格上的相对位置，并且根据浏览器窗口定位了绝对定位的元素。

HTML：

<table><tbody><tr><td><span></span></td></tr></tbody></table>

CSS：

table{
    width:500px;
    height:50px;
}
td {
    position:relative;
    width:50%;
}
span {
    position:absolute;
    right:0;
    display:block;
    background:#333;
    width:20px;
    height:20px;
}

这是jsfiddle上的 example 。

这种格式的正确格式是将跨度大致定位在结果窗口的水平中心，但Firefox会将其一直定位到窗口的右侧。当元素保持绝对定位且右/左/边距属性没有静态数字时，任何解决方法...... 谢谢。

Answer 1

添加

position: relative;

到你的桌子......

table{
    position: relative;
    width:500px;
    height:50px;
}

Here's an example

Answer 2

将position:relative移离td并移至table。

Answer 3

实际上，跨度的顶部位于表格单元格的中间 - 我猜是因为该元素具有绝对位置并且位于表格单元格中。

您可以将负上边距设置为等于span元素大小的一半：

span {
    ...
    height:20px;
    margin-top: -10px; /* this one */
}

<强> DEMO

Answer 4

这是事实，根据specs：

，Firefox确实忽略了它

'position：relative'对table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table的影响-caption元素未定义。

一个常见的解决方案是使用display: relative在单元格中放置一个除法，然后绝对定位将在其中工作，但这实际上取决于您如何使用该表。如果您使用它进行布局，我建议您找一种实现布局的替代方法。如果它是表格数据，那么浮动会为你工作吗？

在相对元素Firefox中嵌套绝对元素

4 个答案: