在Firefox中使用轮廓和伪元素的奇怪行为 [英] Weird behavior in Firefox with outlines and pseudo-elements

问题描述

当您结合轮廓和伪元素时，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>在Chrome和Safari中，Hello不在大纲中。< / p> < p>在firefox中，大纲扩展，Hello在大纲内。 
< / div>  
 

$ b

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

编辑：
在Firefox 20.0，Chrome 28和Safari 5.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; 
} 
  

演示

Firefox behaves differently than Chrome and Safari (I haven't tested others browsers) when you combine outline and pseudo-elements. Is there a way to fix it or is this a bug?

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

Demo: http://codepen.io/romainberger/pen/nuxlh

Edit: Tested in Firefox 20.0, Chrome 28 and Safari 5.1

解决方案

Now used to

box shadow

as like this

.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

这篇关于在Firefox中使用轮廓和伪元素的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！