作者:特异型爷们喵 | 来源:互联网 | 2023-05-26 11:39
在Chrome和IE9上,我指定的CSS大纲完全符合我的要求,并作为我正在构造的元素的第二个边框.
在Firefox上,大纲向外扩展,以便它包含我生成的:: after伪元素以及主元素.
这是一个错误,还是预期?它有什么好的/简单/干净的解决方法吗?如果可能的话,我宁愿避免添加额外的标记.
1> RGLSV..:
是的,它看起来像火狐中的一个bug(sorta),请在这里查看.现在有些人似乎在争论如果孩子是绝对的,或者更确切地说,如果轮廓应该覆盖"一切",这有点奇怪,而且根本不是预期的行为,在使用时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;
}
In Chrome and Safari the 'Hello' is outside of the outline.
In firefox the outline is extended and the 'Hello' is inside the outline. Bug from Firefox or is there a way to fix this?