表格单元格内的 CSS 绝对定位在 Firefox 中不起作用

Question

我无法解决 Firefox 中的定位问题。它似乎不遵循绝对定位规则。是否有我正在做的事情不应该做，但有些浏览器可以处理，有些则不能？

JS fiddle :

原创 - http://jsfiddle.net/g9qzh/

已更新 - http://jsfiddle.net/g9qzh/2/

适用于 IE、Chrome、Safari、Opera

这是实际的代码。如果我没有遵循某种我不知道的标准，请告诉我。

HTML:

<table>
    <tr>
        <td>
            <div id="three">Three</div>
            <div id="two">Two</div>
        </td>
    <tr>
    <tr>
        <td>
            <div id="three">Three</div>
            <div id="two">Two</div>
        </td>
    <tr>
</table>

CSS:

#two {
   position: absolute;
   top: 0;
}
td {
   position: relative;
}

我唯一的线索是，我应该为 td 分配一些其他值，这将使它起作用。其他一些 stackoverflow 问题已经提到 Firefox 对此行为不当，但我一直无法找到答案。我尝试将 top 和 left 值都设为零，但 FF 不会让步。

Answer 1

将 ID 更改为类并将其显示为 block 修复它:

http://jsfiddle.net/GchWZ/

使用内部 div 更好、更“合适”，尽管引用自此堆栈溢出帖子:Does Firefox support position: relative on table elements?

<td>
  <div style="position:relative">
      This will be positioned normally
      <div style="position:absolute; top:5px; left:5px;">
           This will be positioned at 5,5 relative to the cell
      </div>
  </div>
</td>