Html 为什么after伪元素在firefox中绝对定位时会移动额外的像素？

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

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

如果我更改伪元素以保持背景色，则它们没有对齐问题：

有什么想法吗

编辑：firefox中的图像，

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

谢谢

---

/Jai

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

---

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

---

嗯。。。几年后，仍然是同一个问题：如果你告诉Firefox（现在说的是45版）一些关于：before或：after和一些带有厚边框三角形的游戏，他仍然会随机计算出这些元素的宽度和高度，最多一个像素。这给了丑陋的视觉烦恼，尤其是在流畅的响应布局中，当箭头的头部和尾部在所有实例中的一半都与身体分离时

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

对我来说，可靠的帮助是：

将三角形的框大小设置为边框框

将三角形的内部内容（宽度/高度）设置为0

给外边框框指定三角形的确切尺寸

---

相对简单，但对于Firefox来说，这是让他服从规则的唯一方法。Chrome在任何上浆方法上都没有任何问题。Opera虽然是Chrome的克隆版，但令人惊讶的是它表现出了与Firefox一样的滑稽，但也同样的驯服。

你在看什么版本的FF？我使用的是FF11，我看不到你的问题。我看不到firefox 11中的额外像素。在firefox 8上测试，但现在也不工作。我更新到了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;
}​