Firefox：位置绝对不正确之前

Question

[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的绝对监督：绝对）：

铬：

火狐：

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

Answer 1

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

如果将0分配给left或top，则它们会与根元素对齐。把它们留下来，规则的位置在firefox中是正确的。

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

抱歉，我没有找到更好的东西