影响轮廓的伪元素

Question

很确定这是Firefox的一个错误，但也许有人可以权衡。

我在100x100的盒子周围应用了一个轮廓。当您使用绝对定位的伪元素时，它应该从文档流中删除它，但它似乎仍然影响outline属性的流。 IE和Chrome似乎正如我所料那样渲染它，黑色轮廓保持定位于主元素。有什么想法吗？

＆＃13;

＆＃13;

.content
{
  width:100px;
  height:100px;
  outline:1px solid black;
  border:1px solid yellow;
  position:relative;
}

.content:after
{
  position:absolute;
  content:'pseudo';
  background-color:salmon;
  width:200px;
  top:150px;
}

＆＃13;

<div class='content'></div>

＆＃13;

＆＃13;

＆＃13;

http://jsbin.com/gatupogiwi/1/edit?html,css,output

Answer 1

您可以将$easy_encounters样式更改为outline：

box-shadow

为：

outline:1px solid black;