CSS arrow icon borders render differently in different browsers

I'm trying to build arrow icons with the css triangles method.

I built this one in Chrome v14 - OSX, and it works fine:

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

But it looks very different in any other bro开发者_JAVA百科wser:

Any thoughts on this?

---

Without knowing which browsers I'd hazard a guess at looking at conditional stylesheets if it is by chance ie

Just google conditional stylesheets or visit this link

---

You should utilize the transparent property instead of explicitly setting the background colors. This is happening because you're trying to fill in a small block with a background which is causing some issues.

I've forked your fiddle: http://jsfiddle.net/JXXZa/

That has all the necessary changes and should display better in all browsers.