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

Question

http://jsfiddle.net/NgdUR/

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

如果你在 opera、chrome、safari 上检查它，它工作得很好，但在 firefox 中，后伪元素上有一个额外的像素(或前一个少一个像素)有人知道为什么会这样吗？

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

有什么想法吗？

在 firefox 中编辑图片，

我在其他浏览器中的样子:

谢谢

/杰

Answer 1

我添加了一个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;
}​