Firefox CSS 大纲错误？

Question

在 Chrome 和 IE9 上，我指定的 CSS 轮廓完全符合我的要求，并作为我正在设计的元素周围的第二个边框。

但在 Firefox 上，轮廓向外扩展，因此它包含我生成的 ::after 伪元素以及主要元素。

这是一个错误，还是预期的？有什么 good/easy/clean 解决方法吗？如果可能，我宁愿避免添加额外的标记。

Answer 1

是的，它看起来像是 firefox 中的一个错误（有点），检查一下 here。现在有些人似乎在争论，如果 children 是绝对的或不是绝对的，或者更确切地说，大纲是否应该涵盖 'everything'，这有点奇怪，根本不是预期的行为，当使用 position: absolute，至少对我来说是这样。

解决方案一：

使用额外的伪选择器，用于 .main class（我看到你没有使用 :before class，所以你可以使用那个），并从那里开始工作，似乎在所有方面都很好。
查看 demo here 或下面的片段

.main {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px auto;
  border: 2px solid #f00;
}
.main:before {
  content: '';
  position: absolute;
  border: 2px solid #00f;
  /*adjust if needed if using border-box*/
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  z-index: -1;
}
.main:after {
  content: 'Hello';
  position: absolute;
  width: 100px;
  text-align: center;
  bottom: -50px;
}
.wtf {
  width: 400px;
  margin: 90px auto;
}

<div class="main"></div>
<div class="wtf">
  <p>In Chrome and Safari the 'Hello' is outside of the outline.</p>
  <p>In firefox the outline is extended and the 'Hello' is inside the outline. Bug from Firefox or is there a way to fix this?</p>
</div>

方案二：

使用 box-shadow 道具。无需额外的 :pseudo 选择器即可实现该效果
查看 demo here 或下面的片段

.main {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px auto;
  border: 2px solid #f00;
  box-shadow: 0 0 0 2px #00f;
}
.main:after {
  content: 'Hello';
  position: absolute;
  width: 100px;
  text-align: center;
  bottom: -50px;
}
.wtf {
  width: 400px;
  margin: 90px auto;
}

<div class="main"></div>
<div class="wtf">
  <p>In Chrome and Safari the 'Hello' is outside of the outline.</p>
  <p>In firefox the outline is extended and the 'Hello' is inside the outline. Bug from Firefox or is there a way to fix this?</p>
</div>

Firefox CSS 大纲错误？

Firefox CSS outline bug?

css

firefox

outline