Firefox CSS外边框 bug？

Question

在Chrome和IE9上，我指定的CSS轮廓线正好符合我的要求，并作为我正在样式化的元素的第二个边框。

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

这是一个错误还是预期行为？有没有好的/简单的/干净的解决方法？如果可能的话，我更喜欢避免添加额外的标记。

- Codemonkey

---

请发布您的代码... - Bhojendra Rauniyar

Normalize.css 使浏览器更一致地呈现所有元素，并符合现代标准。它精确地针对需要规范化的样式。- http://necolas.github.io/normalize.css/ - Luís P. A.

不是我的代码，但这里有一个例子。http://codepen.io/romainberger/pen/nuxlh从轮廓切换到box-shadow是可行的，但我仍然好奇是否可以正确地使用轮廓。我是否缺少某个模糊的属性之类的东西？ - Codemonkey

添加 normalize.css 对 Luis 没有任何影响。 - Codemonkey

今天安装了35.0。 - Codemonkey

Answer 1

看起来像是Firefox的一个bug（有点）点击这里查看。现在有些人争论是否应该期望子元素使用绝对定位时是否应该完全被轮廓线覆盖，或者轮廓线是否应该覆盖“所有内容”，这有点奇怪，并不是使用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>

- RGLSV

---

你好，这看起来是个不错的解决方案。但是如果主要元素的边框宽度改变了，:after 伪元素的边框或阴影位置也会改变。我们该如何解决这个问题呢？谢谢。 - LarAng