CSS箭头图标边框在不同的浏览器中呈现不同

Question

我正在尝试使用css triangles method构建箭头图标。

我在Chrome v14 - OSX中构建了这个，它运行正常：

http://jsfiddle.net/olegmil/2cXZw/21/

但它在任何其他浏览器中看起来都非常不同：

对此有何想法？

Answer 1

在不知道哪些浏览器的情况下我会冒险猜测条件样式表是否偶然，即

只需谷歌条件样式表或访问this link

Answer 2

您应该使用透明属性，而不是显式设置背景颜色。这种情况正在发生，因为您正在尝试填充一个带有背景的小块，这会导致一些问题。

我把你的小提琴分开：http://jsfiddle.net/JXXZa/

具有所有必要的更改，并且应该在所有浏览器中更好地显示。