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/