css - Firefox16.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>

</ 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

問題は次のとおりです。CSS2.1仕様でposition: relativeは、テーブル要素では機能しません。

table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell、およびtable-caption要素に対する「position：relative」の影​​響は未定義です。

<div>1つの解決策は、の中に別のものを追加し、代わりに<td>それを作成することです。position: relative

_{注： https ：//stackoverflow.com/a/6079254から恥知らずに「盗まれた」と答えてください}