2010-08-17 123 views
0

當用戶有權編輯時,我有一個編輯按鈕出現在頁面上。我已經實現了它作爲一個鏈接:IE中隱藏的背景圖像

<a class='editlink' href='edit.html'></a> 

我相應的CSS呈現EDITLINK類作爲一個鉛筆圖標:

.editlink{ 
background-image: url(../img/pencil.png); 
background-repeat:no-repeat; 
padding: 2px 8px; 
} 

這在Firefox罰款,但不會在IE中出現的所有。如果我把一個& nbsp;在<a>標籤內,然後顯示鉛筆,但我希望將標籤保留爲空。有沒有修改我可以做的CSS來解決這個問題?

回答

2

這是一個與IE中hasLayout屬性再次相關的錯誤。

嘗試增加

zoom:1; 

你的風格,它應該工作的罰款。

+0

,突然間我的整個網站在IE中運行。這解決了它完美。謝謝。 – 2010-08-18 00:15:33

+0

很高興能幫到你!更好地保持這個hasLayout在內存中的東西。它會更有可能在一天或另一天再次出現。 – 2010-08-18 00:52:41

0

這實際上是IE中很常見的問題。即使沒有內容的表單元格也無法實際呈現或出現在文檔中。這很正常。我對你的建議是保持空間在那裏或使鏈接「顯示:塊;」然後使用寬度和高度使其變大或變小。這有它自己的定位問題,因爲它不再是一個內聯元素。

一個堅實的替代辦法是採取的鏈接並執行以下操作它:

<a class='editlink' href='edit.html'><img src="img/pencil.png"></a> 

這將確保它正常伸展錨在所有瀏覽器。

+0

謝謝,山姆。我們無法執行標記的原因是需要我們的代碼生成鏈接才能知道圖像所在的路徑。除了任何其他解決方案,我可能會選擇空間選項。 – 2010-08-17 23:59:37

0

您可以在樣式表中的鏈接上設置寬度和高度。這在FF,IE和Chrome中正確呈現:

.editlink{ 
background-image: url(../img/pencil.png); 
background-repeat:no-repeat; 
padding: 2px 8px; 
width: 10px; height: 20px; 
}