Border rendering issue in IE

I'm having the weirdest issue in IE (7, specifically) when implementing CSS borders. I first noticed this a few months ago.

The CSS is literally this: #donate {border:1px solid #299ae5;}

As you can 开发者_高级运维see from the attached image, both of these screenshots were taken in IE7, from the same website, different pages - same template file. It's like the border has a "tail" in the bottom left corner.

Does anyone have any insight about this???

Edit: Here is the HTML (although I've seen this also on random sites in IE7 recently on input fields as well)

<li><a href=""><span>Donate</span></a></li>

And here's the CSS:

li { display: inline; }
li a { color: #fff; display: block; float: left; margin-right: 8px; padding-right: 8px; line-height: 1.2em; }
li a span { background: url(bg-gradient.png) repeat-x 0 0; border: 1px solid #299a35; padding: 1px 5px 2px 4px; }

Thanks in advance!

I tend to use display:inline-block...the only other thing I'd change is making the anchor the button rather than the span. here's a quick example http://jsfiddle.net/3x4fR/2/

Does giving the li a span element the display: block; declaration do the trick? It may be having trouble applying vertical padding to an inline element.

jsfiddle makes testing stuff easy.

If you don't need the span get rid of it if not try *zoom:1 or some other way to give 'hasLayout' to the element. see example here http://jsfiddle.net/ShaggyDude11/zbZr8/3/