伪元素和 <ul> 显示：表格答案

【问题标题】：pseudo-elements and <ul> display: table伪元素和 <ul> 显示：表格
【发布时间】：2014-03-27 10:25:10
【问题描述】：

在 Firefox (27.0.1) 中，如果 <li> 是 display: table-cell;，我无法相对于 <li> 定位 :after。

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 是 display: table-cell;，有没有办法在 <li> 上相对于 Firefox 中的 <li> 设置伪元素的样式，如果不是，为什么？

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

【问题讨论】：

你想做什么？
@Paulie_D 我正在尝试为浏览器之间呈现的这种差异获得解释或解决方案。不只是尝试制作带边框的表格，我认为小提琴很好地显示了问题。 --更新问题。
Firefox 有一个带有 position:relative; <table> 元素的错误。 stackoverflow.com/questions/5148041/…

标签： css firefox pseudo-element

【解决方案1】：

From the spec

'position:relative'对table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column的影响、table-cell 和 table-caption 元素未定义。

由于position: absolute 将从最近的具有position: relative（或根主体）的父级计算，它会忽略“table-cell w/ position: relative”父级并从其他祖先计算。

【讨论】：