html - 为什么在Firefox中绝对定位后伪元素会移动一个额外的像素？

Question

http://jsfiddle.net/NgdUR/

我基本上使用带边框的css三角形来创建一个带有向上和向下箭头的自定义选择框。

如果您在 Opera、chrome、safari 上检查它，它工作得很好，但是在 Firefox 中，后伪元素上有一个额外的像素（或者之前的伪元素少了一个像素）有人知道为什么会发生这种情况吗？

如果我更改伪元素以保持背景颜色，则它们没有对齐问题：http: //jsfiddle.net/NgdUR/1/

有任何想法吗？

编辑：Firefox中的图像，

我在其他浏览器中的外观：

谢谢

/杰

Answer 1

我添加了 1px 的高度和宽度，并将每个伪元素的边框宽度更改为 2px。可以在 Firefox、IE9 和 Chrome 中使用。IE8 和 Opera 11+ 看起来有点笨重。

更新的小提琴

.test {
    position:relative;
    background:#ccc;
    border:1px solid #aaa;
    box-shadow:#aaa 0 0 4px;
    display:block;
    height:26px;
    width:28px;
   }
.test:before,
.test:after {
    content:"";
    border:2px solid transparent;
    width:1px;
    height:1px;
    display:block;
    position:absolute;
    left:11px;
}
.test:before {
    border-bottom:3px solid #000;
    top:6px;
}
.test:after {
    border-top:3px solid #000;
    top:14px;
}​

Answer 2

这在 FF11 上为我修复了它：

.test {
    position:relative;
    background:#ccc;
    border:1px solid #aaa;
    box-shadow:#aaa 0 0 4px;
    display:block;
    height:26px;
    width:28px;
   }
.test:before {
    content:"";
    border:3px solid transparent;
    border-bottom:3px solid #000;
    width:0;
    height:0;
    display:inline-block;
    position:absolute;
    top:6px;
    left:11px;
}
.test:after {
    content:"";
    border:3px solid transparent;
    border-top:3px solid #000;
    width:0;
    height:0;
    display:inline-block;
    position:absolute;
    top:14px;
    left:10px;
}

Answer 3

好吧......几年后仍然是同样的问题：如果你告诉 Firefox（目前是 45 版）一些带有 :before 或 :after 的游戏以及一些带有粗边框三角形的游戏，他仍然会错误计算宽度和高度这些元素随机最多一个像素。这会带来丑陋的视觉烦恼，尤其是在流畅响应的布局中，当箭头和箭头在一半的情况下与它们的身体分离时。

不得不在我的一个项目中修复这些问题，我偶然发现了这篇文章。但它实际上并没有开箱即用。而是提出了尝试完全其他方式的想法。

在我的情况下，可靠的帮助是：

1. 将三角形的 box-sizing 设置为 border-box
2. 给三角形的内部内容（宽度/高度）大小 0
3. 给外部边框框提供三角形的确切所需大小

相对简单，但对于 Firefox 来说，这是让他服从规则的唯一方法。Chrome 对任何大小调整方法都没有任何问题。Opera 尽管是 Chrome 的克隆版，但令人惊讶地表现出与 Firefox 相同的丑陋，但也具有相同的驯服性。