IE中的边框呈现问题

我在实现CSS边框时遇到了IE（7，特别是）中最奇怪的问题。几个月前我首先注意到了这一点。IE中的边框呈现问题

的CSS简直是这样的：#donate {border:1px solid #299ae5;}

你可以从所附的图像看，这两种截图拍摄于IE7，在同一网站上，不同的网页 - 同样的模板文件。就像边框在左下角有一个“尾巴”。

enter image description here

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

编辑：下面是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; }

谢谢提前！

来源

2011-03-02 webcodeslinger

需要更多的上下文 - 这是什么样的元素？你可以显示HTML去与它？ – 2011-03-02 20:44:54

您是否将任何边距或填充应用于元素？ – dmackerman 2011-03-02 21:38:12

hehehe。哇，太可怕了！但如果这是IE7特有的问题，说实话，我会忽略它 - 其余的IE7用户习惯于在浏览器中查看垃圾的网站，这几乎不是最糟糕的渲染问题。 – Spudley 2011-07-21 15:10:14

是否给li a span元素display: block;声明做窍门？将纵向填充应用于内联元素可能会遇到问题。

来源

2011-07-22 05:24:56

或者缩放：1来触发hasLayout？ – 2011-08-11 21:55:13

添加显示：块;到跨度应该做的伎俩。并且跨度上的填充应该生效。 – hybrid 2011-08-20 03:12:42

jsfiddle使测试的东西容易。

如果您不需要跨度摆脱它，如果不尝试*缩放：1或其他方式给'元素的'hasLayout'。看到这里的例子http://jsfiddle.net/ShaggyDude11/zbZr8/3/

来源

2011-08-15 20:30:32

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

来源

2011-08-24 12:34:58 Nasir

IE中的边框呈现问题

回答

相关问题