Firefox CSS轮廓错误? [英] Firefox CSS outline bug?

问题描述

在Chrome和IE9上，我指定的CSS轮廓完全符合我的要求，并且充当了我要样式的元素的第二个边框.

On Chrome and IE9 the CSS outline that I'm specifying does exactly what I want, and acts as a second border around the element I'm styling.

在Firefox上，轮廓向外扩展，因此包含了我生成的:: after伪元素以及主要元素.

On Firefox though, the outline gets expanded outwards so that it encompasses the ::after pseudo element that I've generated, as well as the main element.

这是错误，还是预期的?任何好的/简单/干净的解决方法吗?如果可能的话，我宁愿避免添加额外的标记.

Is this a bug, or expected? Any good/easy/clean workarounds for it? I'd prefer to avoid adding extra markup if possible.

推荐答案

是的，它看起来像是firefox中的bug(sorta)，请检查 position: absolute时有点怪异，而根本不是预期的行为，至少对我来说.

Yeah it looks like a bug(sorta) in firefox, check it out here. Now some people seem to argue if this is to be expected if children are absolute or not, or rather if the outline should cover 'everything', which is kinda weird, and not at all the expected behavior, when using position: absolute, at least for me.

解决方案1:

• 使用额外的伪选择器为.main类工作(我看到您没有使用:before类，因此可以继续使用)，然后从那里开始工作，似乎很好全面.
• 在 演示在此处 或以下代码段

• work you way with a extra pseudo selector, for the .main class(I see you're not using the :before class so you can go with that), and work your way from there, seems to work fine all across the board.
• check out the demo here or the snippet bellow

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

• 使用盒子阴影道具.在没有额外的:pseudo选择器的情况下实现该效果
• 在 演示在此处 或以下代码段

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

这篇关于Firefox CSS轮廓错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！