Firefox：之前位置绝对不正确[重复]

Posted 2023-03-06

【中文标题】Firefox：之前位置绝对不正确[重复]

【英文标题】：Firefox :before position absolute incorrect [duplicate]

【发布时间】：2014-07-19 11:20:42

【问题描述】：

[Duplicate of Does Firefox support position: relative on table elements?]

我有一个列表项之间有垂直规则的无序列表：

HTML

<ul class="list-inner-border">
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
</ul>

CSS

.list-inner-border 
    height: 100px;


.list-inner-border li 
    display: table-cell;
    position: relative; // not having this usually causes the misbehaviour
    width: 1%;

.list-inner-border li + li:before 
    background-color: red;
    content: '';
    height: 80%;
    left: 0;
    margin-top: 5%;
    position: absolute;
    top: 0;
    width: 1px;


span 
    background-color: gray;
    display: block;
    height:90px;
    margin: 5px;

Fiddle

上述方法适用于除 Firefox 之外的所有浏览器，它的行为就好像 position:absolute 的容器没有自己的定位（通常忽略 position:absolute）：

铬：

火狐：

在 Firefox 中，所有的:befores 都已跳出其容器并沿根元素的边缘垂直堆叠。

【问题讨论】：

为什么要链接？你没有足够的代表投票关闭吗？虽然如果你不能，我明白那里。我从来没有投票结束我自己的问题，所以我不知道它是否有任何不同。

我确实有足够的代表 (Privilege: Close questions)。如果有人遇到类似问题，我投票决定关闭而不是删除。根本问题是 Firefox 忽略了表格的定位。

.. 但是，您没有投票结束。我是唯一一个拥有的。除非我遗漏了什么，否则您所做的只是编辑您的问题，在顶部包含指向可能重复项的链接。

哦，哎呀。我不知道发生了什么。我在获得足够票数关闭之前添加了问题的链接。我想我忘了添加自己的投票。

【参考方案1】：

带有position: absolute; 的元素实际上是指带有position:absolute; 的下一个父级。 在这里，jacob 证明我错了。

如果将 0 分配给 left 或 top，它们将与根元素对齐。离开这些，规则的位置在 Firefox 中是正确的。

由于所有基于百分比的值的计算方式不同，因此您可能需要绝对值。你也可以为 firefox 做一个后备：Targeting only Firefox with CSS

对不起，我没有找到更好的东西

【讨论】：

"位置为：绝对的元素；实际上是指位置为：绝对的下一个父元素；"这是不正确的。它们指的是最近的祖先，其位置不是static。

删除 left: 0 和 top: 0 解决了它：jsfiddle.net/ypXZZ/14 谢谢！

奇怪的是，我还需要将position: relative 设置为ul 以包含高度。