images around div are mis-aligned in chrome, fine in firefox

Question

So it works fine in firefox and IE, but in chrome the right image is all messed up, bleeding past the text.

Is there something obvious that you guys can see?

Here is my HTML:

<a class="item" href=""><span>Text</span></a>

And my CSS:

a.item {
color:#eeeeee;
background:url(/images/right.gif) top right no-repeat;
display:-moz-inline-box;
white-space:nowrap;
}

a.item span {
display:inline-block;
color:#eeeeee;
background:url(/images/left.gif) top left no-repeat;
line-height:22px;
display:block;
padding:0 15px;

}

Really confused and just now getting into CSS.