伪元素和<ul>显示：表</ul>

Question

在Firefox（27.0.1）中，如果:after为<li>

，我无法将<li>相对于其所属的display: table-cell;定位

http://jsfiddle.net/6WHN6/

ul {
    display: table;
    width: 400px;
    border: solid 1px black;
    padding: 0;
}

li {
    display: table-cell;
    position: relative;
    text-align: center;
}

li:after {
    content: ' ';
    position: absolute;
    height: 100%;
    width: 1px;
    background: blue;
    margin-left: 33.3%;
}

li:last-child:after {
    content: none;
}

有没有办法在<li>相对于<li>相对于Firefox中的display: table-cell;设置psuedo元素，如果li为{{1}}，如果不是，为什么？

在小提琴中，您可以看到伪元素的左边距是文档宽度的33.3％。

Answer 1

From the spec

  

＆table-row-group，table-header-group，table-footer-group，table-row，table-column-的位置：relative＆＃39; 的效果group，table-column， table-cell 和表标题元素未定义。

由于position: absolute将从距离最近的父position: relative（或根体）计算，它会忽略＆＃34; table-cell w / position：relative＆＃34;父母将从其他祖先计算。