影响轮廓的伪元素[重复]

Question

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

我正在围绕 100x100 的框应用轮廓。当您使用绝对定位的伪元素时，它应该将其从文档流中删除，但它似乎仍在影响大纲属性的流。 IE 和 Chrome 似乎像我预期的那样呈现这个，黑色轮廓保持在主要元素的位置。有什么想法吗？

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

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

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

Answer 1

您可以将outline 样式更改为box-shadow：

outline:1px solid black;

到：

box-shadow: 0px 0px 0px 1px black;