为什么在 Firefox 16.0.2 下绝对位置不正确答案

【问题标题】：Why absolute position is not right under Firefox 16.0.2为什么在 Firefox 16.0.2 下绝对位置不正确
【发布时间】：2012-10-22 13:43:00
【问题描述】：

请看这个Fiddle

我升级到FF 16.0.2后，绝对位置有问题。

有什么建议吗？

HTML部分

<table>
<tr>
    <td>
        <div>
            Product 1
            <span>Button</span>
        </div>
    </td>
    <td>
        <div>
            Product 2
            <span>Button</span>
        </div>
    </td>
</tr>

CSS 部分

tr { height:250px; }
td {
    position:relative;
    width:200px;
    text-align:center;
    border:1px solid #999;
}
div {
    position:absolute;
    top:10px; bottom:10px; left:10px; right:10px; /* as padding */
}
span {
    position:absolute; bottom:0; left:50px;
    width:90px; height:20px;
    padding: 5px 0;
    background:#ccc;
}

我想显示的是这样的：

【问题讨论】：

这里的实际问题/问题是什么？ “不正确”是什么意思？
请看我刚刚添加的截图。
它在 Chrome 23 中运行良好，但在 Firefox 16.0.1 中运行良好
看这个：stackoverflow.com/a/6079254

标签： css firefox position css-position

【解决方案1】：

问题是：在CSS 2.1 Spec 中，position: relative 对表格元素不起作用。

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

一种解决方案是在<td> 中添加另一个<div>，然后改为使用position: relative。

_{注意：无耻地从https://stackoverflow.com/a/6079254“偷”回答}

【讨论】：