CSS定位表格单元格中绝对不能在Firefox中运行

前端之家收集整理的这篇文章主要介绍了CSS定位表格单元格中绝对不能在Firefox中运行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我无法在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行为不端,但我还没有找到答案.我尝试分配上和左的零值,但FF不会发生.

解决方法

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

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>

猜你在找的CSS相关文章