Firefox CSS 大纲错误？

Question

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

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

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

Answer 1

是的，它看起来像 Firefox 中的一个错误（排序），请查看 here。现在有些人似乎在争论，如果孩子是绝对的，或者说大纲是否应该涵盖“一切”，这有点奇怪，而且在使用 position: absolute 时完全不是预期的行为，在至少对我来说。

解决方案 1：

• 使用额外的伪选择器为.main 类工作（我看到你没有使用:before 类，所以你可以使用它），然后从那里开始工作，似乎工作正常全面的。
• 查看 demo here 或下面的 sn-p

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

解决方案 2：

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

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