在 Chrome 和 IE9 上，我指定的 CSS 轮廓完全符合我的要求，并充当我正在设计的元素周围的第二个边框。
但在 Firefox 上，轮廓会向外扩展，以便包含我生成的 ::after 伪元素以及主元素。
这是一个错误，还是预期的？有什么好的/简单/干净的解决方法吗？如果可能的话，我宁愿避免添加额外的标记。
是的，它看起来像 Firefox 中的一个错误（有点），检查一下here https://bugzilla.mozilla.org/show_bug.cgi?id=687311。现在，有些人似乎争论，如果孩子是绝对的，这是否是预期的，或者更确切地说，大纲是否应该涵盖“一切”，这有点奇怪，并且在使用时根本不是预期的行为position: absolute， 至少对于我来说。
解决方案一：
- 使用额外的伪选择器来工作，对于
.main类（我发现你没有使用:before类，以便您可以接受），然后从那里开始工作，似乎在所有方面都工作得很好。
- 看看演示在这里 http://codepen.io/anon/pen/ByRNVp或下面的片段
.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 属性。无需额外的 :pseudo 选择器即可实现该效果
- 看看演示在这里 http://codepen.io/anon/pen/jEmPvY或下面的片段
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
