2

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

Live demo

See this images in chrome enter image description here

and now see this result in firefox


enter image description here

4

2 回答 2

1

如果可能,将 更改display:table-cellblockinline-block以修复此错误。或者,position:relative将父级更改为absolute.

于 2012-07-31T08:38:45.813 回答
0

width

  .parent:after{
      left:0;
      content:'';
      right:0;
      top:10px;
      width:100px;
      height:20px;
      background:green;
      position:absolute;
}
于 2012-07-31T09:04:16.770 回答