在Chrome和IE9上,我指定的CSS轮廓线正好符合我的要求,并作为我正在样式化的元素的第二个边框。
但是,在Firefox上,轮廓线向外扩展,以包含我生成的::after伪元素以及主要元素。
这是一个错误还是预期行为?有没有好的/简单的/干净的解决方法?如果可能的话,我更喜欢避免添加额外的标记。
但是,在Firefox上,轮廓线向外扩展,以包含我生成的::after伪元素以及主要元素。
这是一个错误还是预期行为?有没有好的/简单的/干净的解决方法?如果可能的话,我更喜欢避免添加额外的标记。
看起来像是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:
.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>