IE中的边框渲染问题

Question

在实现CSS边框时,我在IE(特别是7)中遇到了最棘手的问题.几个月前我第一次注意到这一点.

CSS实际上是这样的: #donate {border:1px solid #299ae5;}

从附图中可以看出,这两个截图都是在IE7中拍摄的,来自同一个网站,不同的页面 - 相同的模板文件.这就像边界左下角有一个"尾巴".

有没有人对此有任何见解？

编辑:这是HTML(尽管我最近也在IE7中的随机网站上也看到了输入字段)

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

这是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; }

提前致谢!

Answer 1

给li a span元素display: block;声明有用吗？将垂直填充应用于内联元素可能会遇到问题。