Question

在Chrome和IE9上，我指定的CSS大纲正是我想要的，并且作为我正在造型的元素的第二个边框。

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

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

Answer 1

是的，它看起来像是firefox中的一个bug（sorta），请查看 here 。现在有些人似乎在争论如果孩子是绝对的或不是绝对的，或者更确切地说，如果大纲应该覆盖所有的东西，这有点奇怪，并且根本不是预期的行为， position: absolute，至少对我而言。

解决方案1：

使用额外的伪选择器为.main课程（我看到你没有使用:before课程，因此你可以使用它），并从在那里，似乎全面工作正常。
查看 demo here 或下面的代码段

＆＃13;

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

＆＃13;

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

＆＃13;

解决方案2：

使用box-shadow道具。在没有额外的情况下实现这种效果：伪选择器
查看 demo here 或下面的代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Firefox CSS概述bug？

1 个答案: