在table-cell中的position on :: after在Firefox中不起作用？ [英] Position on ::after in table-cell doesn't work in Firefox?

问题描述

以下代码应创建一个伪元素，其跨越其父元素宽度的100％。但是这不会在Firefox中工作，它在Chrome中工作。 Firefox似乎忽略了 .parent 的 position：relative 。这是一个错误吗？

The following code should create a pseudo-element which spans 100% of its parent element's width. However this won't work in Firefox, it does work in Chrome. Firefox seems to ignore the .parent's position:relative. Is this a bug?

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;
}

演示

在 chrome 中查看此图片

See this images in chrome

现在在 firefox

and now see this result in firefox

推荐答案

如果可能，更改 display：table-cell 到块或 inline-block 来修复此错误。或者，将父项上的 position：relative 更改为 absolute 。

If possible, change the display:table-cell to block or inline-block to fix this error. Alternatively, change position:relative on the parent to absolute.

这篇关于在table-cell中的position on :: after在Firefox中不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！