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中的邊框呈現問題

回答

相關問題