Question

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

JS小提琴：

适用于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更好，更“合适”，但是从这个堆栈溢出帖子引用：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>

Answer 2

您正在使用ID

ID是唯一的。如果要重用样式分配，请使用类。

Answer 3

试试这个：

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

和css：

#two {
    position: absolute;
    top: 0px;
}

#wrapper {
    position: relative;
}

Answer 4

问题来自FF如何呈现表格。如果将TD设置为display:inline-block;，则应正确显示。

Answer 5

除了Brandt指出的重复ID问题，指定positioning to table cells is dodgy at best - 我很惊讶它适用于任何浏览器。如果必须使用表格，请将要放置在div中的元素换行并指定包装器div position: relative：

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

CSS

#two {
   position: absolute;
   top: 0;
}
.wrapper {
   position: relative;
}

Answer 6

如果你想把东西放在单元格的顶部和底部，也是在Firefox中，我可以使用以下混合的CSS和（不幸的是）jQuery。

在你的td中使用一个包装div（div.inner），它在td中有position = relative style。在包装器内部，我添加了2个div，它们位于单元格的顶部和底部。
定位在顶部（class = interval-start）是免费的，通过CSS定位。
将div.interval-end定位在底部是通过脚本完成的，脚本会添加图片中显示的样式。对于可变的td高度和默认情况下包装器div为0高度，您需要一种方法来告诉元素它应该到底部的距离。脚本如下：
```
        $("table .inner .interval-end").each(function () {
            $(this).css({top: ($(this).parent().parent().height() - 10) + "px"})
        }).show()
```
我最初使div.interval-end不可见，设置'top'样式，然后通过jQuery show（）使其可见。

希望这有助于任何人尝试实现同样的目标。如果有更好的方法，请告诉我，特别是如果这些方法不需要编写脚本。顺便说一句：我尝试设置包装器div.inner的高度样式，但它与Firefox中的表格布局混淆。

Answer 7

使用CSS显示有正当理由：表格样式。它消除了显示的问题：块和显示：内联块无法解决。这些原因占据了一本关于CSS样式的书的整章，所以我不会在这里讨论它们。同一本书还描述了在具有该显示类型的项目中定位的问题。 CSS 2.1规范根本没有解决这个问题，Mozilla选择了一个忽略尝试用这些元素创建定位上下文的课程。 CSS表定位是完善的，成熟的方法，而不是“狡猾” - 它只需要理解它的限制 - 就像任何其他CSS元素一样。对于液体布局和元素尺寸可变或未知的其他布局，它对于垂直间距和定位是必不可少的。

此线程中的一个建议已经呈现 - 在“table-cell”元素集中创建一个div来定位：relative并将其用于定位上下文。另一种方法是在该单元格中嵌入另一个CSS表，并使用它来定位网格中的元素。第三种方法是将CSS表包装在另一个创建定位上下文的项目中。

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

7 个答案: