css - Position on::after in table-cell 在 Firefox 中不起作用？

Question

下面的代码应该创建一个伪元素，它跨越其父元素宽度的 100%。然而，这在 Firefox 中不起作用，它在 Chrome 中有效。 Firefox 似乎忽略了 .parent 的 position:relative。这是错误吗？

HTML

<div class="parent">

</div>

CSS

.parent{
  background:red;
  width:100px;
  height:100px;
  position:relative;
  display:table-cell;
}

.parent:after{
left:0;
  content:'';
  right:0;
  top:10px;
  height:20px;
  background:green;
  position:absolute;
}

Live demo

在 chrome 中查看此图片

现在在 firefox 中看到这个结果

---

Answer 1

如果可能，将 display:table-cell 更改为 block 或 inline-block 以修复此错误。或者，将父级上的 position:relative 更改为 absolute。