zlacker

>>pg+(OP)
Use `min-resolution: 2ddpx` media query for high-resolution graphics rather than/in addition to `-webkit-min-device-pixel-ratio: 2`, to allow non-webkit browsers to display high-resolution graphics.

I have tested this fiddle and found it to work in both Chrome and Firefox: http://jsfiddle.net/LRaJj/

----

Alternatively, and perhaps even better, use unicode ▲ as up arrow instead of gif, as suggested earlier: https://news.ycombinator.com/item?id=4238956

>>maggit+EpAw
Another alternative, which doesn't need media queries, svg: http://jsfiddle.net/pJt4N/1/

SVG for the arrow:

    <svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 10 10' width='10' height='10'><path d='M0.5,10L5,1,9.5,10' fill='#999'></svg>

As a data-URI:

    data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewbox%3D'0%200%2010%2010'%20width%3D'10'%20height%3D'10'%3E%3Cpath%20d%3D'M0.5%2C10L5%2C1%2C9.5%2C10'%20fill%3D'%23999'%2F%3E%3C%2Fsvg%3E

>>maggit+vXJw
Please could you put a linebreak in that very long string, or put four spaces in front of it?

Thank you!