10

我无法弄清楚 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 不会让步。​</p>

4

7 回答 7

12

将 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>
于 2012-06-13T18:49:33.807 回答
1

您正在使用 ID

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

于 2012-06-13T18:45:54.990 回答
1

试试这个：

<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;
}
于 2012-06-13T18:58:55.110 回答
1

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

于 2012-06-13T19:01:08.550 回答
0

除了IDBrandt 指出的重复问题之外，将定位分配给表格单元格充其量是狡猾的- 我很惊讶它在任何浏览器中都有效。如果必须使用表格，请将要放置的元素包装在 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;
}
于 2012-06-13T18:51:04.413 回答
0

如果你想在单元格的顶部和底部放置东西，同样在 Firefox 中，我让它工作在下面的 CSS 和（不幸的是）jQuery 组合中。

  1. 在 td 中使用包装 div (div.inner)，它在 td 中具有 position=relative 样式。在包装器内部，我添加了 2 个 div，它们将位于单元格的顶部和底部。 在此处输入图像描述

  2. 通过 CSS 定位在顶部（class=interval-start）定位是免费的。

  3. 将 div.interval-end 定位在底部是通过脚本完成的，它添加了图片中显示的样式。使用变量 td-heights 并且包装器 div 默认为 0-height，您需要一种方法来告诉元素它应该到底部多远。脚本如下：

            $("table .inner .interval-end").each(function () {
            $(this).css({top: ($(this).parent().parent().height() - 10) + "px"})
        }).show()
  4. 我最初使 div.interval-end 不可见，设置“顶部”样式，然后通过 jQuery show() 使其可见。

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

于 2013-11-19T13:04:59.640 回答
-1

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

在这个线程中提出了一个建议 - 在“table-cell”元素中创建一个 div 设置为 position: relative 并将其用于定位上下文。另一种方法是在该单元格中嵌入另一个 CSS 表格，并使用它在网格中定位元素。第三种方法是将您的 CSS 表包装在另一个创建定位上下文的项目中。

于 2012-07-05T23:16:46.553 回答