Firefox CSS概述bug？

Question

在Chrome和IE9上,我指定的CSS大纲完全符合我的要求,并作为我正在构造的元素的第二个边框.

在Firefox上,大纲向外扩展,以便它包含我生成的:: after伪元素以及主元素.

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

Answer 1

是的,它看起来像火狐中的一个bug(sorta),请在这里查看.现在有些人似乎在争论如果孩子是绝对的,或者更确切地说,如果轮廓应该覆盖"一切",这有点奇怪,而且根本不是预期的行为,在使用时position: absolute,至少对我而言.

解决方案1:

• 使用额外的伪选择器,为.main类(我看到你没有使用:before类,所以你可以使用它)工作,并从那里工作,似乎全面工作正常.
• 看看这里的演示或下面的代码片段

.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道具.在没有额外的情况下实现这种效果:伪选择器
• 看看这里的演示或下面的代码片段

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