CSS定位绝对在不在Firefox中工作的表格单元格中

Question

我无法弄清楚这个定位问题在Firefox中.它似乎没有遵循绝对定位规则.有什么我不应该这样做,但有些眉毛处理它,有些不处理？

JS小提琴:

原创 - 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更改为类并将其显示为块修复它:

http://jsfiddle.net/GchWZ/

虽然从这个堆栈溢出帖子中引用,但是对于用户内部div更好,更"合适":Firefox是否支持位置:相对于表元素？

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