为什么Firefox 16.0.2下的绝对位置不正确

Question

请参阅此Fiddle

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

有什么建议吗？

Html Part

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

我想以这种方式展示：

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}

中无耻地“偷走”