css - 为什么在 Firefox 16.0.2 下绝对位置不正确

Question

请看这个小提琴

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

有什么建议么？

网页部分

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

​</p>

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;
}​

我想显示的是这样的：

Answer 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 元素的影响未定义。

<div>一种解决方案是在内部添加另一个<td>并制作它position: relative。

_{注意：无耻地回答来自：https ://stackoverflow.com/a/6079254}