Firefox 中带有轮廓和伪元素的奇怪行为答案

【问题标题】：Weird behavior in Firefox with outlines and pseudo-elementsFirefox 中带有轮廓和伪元素的奇怪行为
【发布时间】：2013-04-19 06:29:37
【问题描述】：

当你结合大纲和伪元素时，Firefox 的行为与 Chrome 和 Safari 不同（我没有测试过其他浏览器）。有没有办法修复它还是这是一个错误？

.main {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px auto;
  border: 2px solid #f00;
  outline: 2px solid #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>

演示：http://codepen.io/romainberger/pen/nuxlh

编辑：在 Firefox 20.0、Chrome 28 和 Safari 5.1 中测试

【问题讨论】：

标签： css firefox pseudo-element

【解决方案1】：

现在习惯了

盒子阴影

像这样

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

.wtf {
  width: 400px;
  margin: 90px auto;
}

Demo

【讨论】：

我没有考虑过盒子阴影，它很好用。我有点担心浏览器支持，但它只排除了 IE8，所以我会选择“螺丝 IE8”。谢谢！

【解决方案2】：

无需使用 z-index。

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

.wtf {
  width: 400px;
  margin: 90px auto;
}

【讨论】：