css spritesheets need breathing room

At work, I was seeing odd results with little blue underlines under some of the stars in our dealer ratings:

It was a bit mysterious - sometimes there, sometimes not. And as in that example, sometimes on the same page.

Through trial and error I realized messing with the browser width could make the underlines appear and disappear. Or even more reliably, changing the zoom level - that could get it to happen even on Safari, not just Chrome where I was mostly working.

The stars were <i> tags, fixed size (16px*16px) from a spritesheet:

I guess the takewaway is spritesheets need more breathing room, a bit more transparent space between elements, because browsers and screens are doing all kinds of tricks where a screen pixel is not a browser pixel. 95 times out of 100, that magic is transparent to the web developer, but sometimes the abstraction leaks a bit.