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

我倾向于使用display：inline-block ...我改变的唯一另一件事就是使锚点成为按钮而不是跨度。这是一个简单的例子http://jsfiddle.net/3x4fR/2/

Answer 2

为li a span元素提供display: block;声明是否可以解决问题？将垂直填充应用于内联元素时可能会遇到问题。

Answer 3

jsfiddle让测试变得简单。

如果你不需要跨度摆脱它，如果不尝试* zoom：1或其他方式给元素'hasLayout'。请参阅此处示例http://jsfiddle.net/ShaggyDude11/zbZr8/3/