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

Posted 2023-03-06

【中文标题】表格单元格中的 CSS 绝对定位在 Firefox 中不起作用

【英文标题】：CSS Positioning Absolute within table cells not working in Firefox

【发布时间】：2012-06-16 18:57:59

【问题描述】：

我无法在 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 分配一些其他值，这会导致它工作。其他一些 *** 问题提到了 Firefox 的行为不端，但我一直无法找到答案。我尝试将顶部和左侧的值都分配为零，但 FF 不会让步。 ​

【问题讨论】：

这对我来说适用于 FF 12.0。 “二”与“三”重叠 - 但它仍然是错误的，请参阅我的答案

每个“二”应该与它自己的“三”重叠我不确定你是否只是看到两个“二”重叠相同的三个

这在14年前就被记录为bug了！ bugzilla.mozilla.org/show_bug.cgi?id=35168阅读这篇有用的文章davidwalsh.name/table-cell-position-absolute

从 Firefox 32 开始，表格单元格中元素的绝对定位似乎工作正常。

【参考方案1】：

您正在使用 ID

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

【参考方案2】：

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

【讨论】：

成功了！太好了，现在你怎么知道要这样做？是我应该阅读的内容（我真的不知道display的正确用法）还是只是Firefox的“修复”，或者它是否应该是将来执行此操作时的标准操作程序?

我记得很久以前读过一些关于 Firefox 如何以不同方式处理 td 的内容。我会试着找到这篇文章。

是的，display:block 是一个临时解决方案，因为现在我尝试进一步扩展它并需要 display:block-inline，它在 Firefox 中也出现故障，但在其他所有浏览器中仍然有效。跨度>

实际上现在diplay:inline-block 工作了。我将选择您的答案，因为它需要在线多行 CSS 而不是更多的 html。

【参考方案3】：

除了 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;

【参考方案4】：

试试这个：

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

【参考方案5】：

问题来自于 FF 渲染表格的方式。如果您将 TD 设置为 display:inline-block;，它应该会正确显示。

【参考方案6】：

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

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

【讨论】：

我有点晚了，但我发现自己对否决票感到惊讶。为什么？我在这里就这个话题给出了相当详细的回复：***.com/questions/8951993/… ..我的回复获得了主要的赞成票和“最佳答案”。我使用 CSS Tables 进行水平菜单定位，并作为“Stick Footers”问题的解决方案，无需求助于绝对尺寸（哦，用户先生？您需要将显示设置为这个尺寸才能看起来正确......）或 javascript。

【参考方案7】：

如果您想将内容放置在单元格的顶部 和 底部，同样在 Firefox 中，我通过以下混合 CSS 和（不幸的是）jQuery 使其工作。

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

通过 CSS 定位免费在顶部定位 (class=interval-start)。

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

        $("table .inner .interval-end").each(function () 
            $(this).css(top: ($(this).parent().parent().height() - 10) + "px")
        ).show()

我最初使 div.interval-end 不可见，设置“顶部”样式，然后通过 jQuery show() 使其可见。

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