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

Question

http://jsfiddle.net/NgdUR/

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

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

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

有什么想法吗？

编辑：Firefox 中的图像，

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

谢谢

/杰

Answer 1

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

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

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

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

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

Answer 2

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

Updated fiddle

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

这在 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;
}