Question

http://jsfiddle.net/NgdUR/

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

如果你在opera，chrome，safari上检查这个就可以了，但是在firefox中，after伪元素上有一个额外的像素（或之前的一个像素），任何人都知道为什么会发生这种情况？

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

任何想法？

编辑：firefox中的图片，

enter image description here

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

enter image description here

由于

/洁

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

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）的东西：之前或之后和一些带有粗边框三角形的游戏，他仍然错误地计算宽度这些元素的高度最多可达一个像素。这会产生丑陋的视觉烦恼，尤其是在流畅的响应式布局环境中，当箭头和尾部在所有实例的一半时与其身体分离时。

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

在我的案例中可靠的帮助是：

将三角形的框大小设置为边框
给出三角形的内部内容（宽度/高度）大小为0
为外边框提供三角形的确切尺寸

相对简单，但对于Firefox来说，唯一能让他服从规则的方法。 Chrome对任何尺寸调整方法都没有任何问题。 Opera虽然是Chrome的克隆版，却出人意料地表现出与Firefox相同的风格，但同样也是同样的Taming。

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

3 个答案: