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

Question

请看这个小提琴

升级到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;
}?

我想要显示的是这样:

Answer 1

问题是:在CSS 2.1规范中,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改为.

_{注意:从/sf/answers/425547811/解答无耻地"被盗"}