圖像鏈接不會在Firefox上顯示

我有幾個圖像嵌套在錨標籤內。它們在Chrome和IE上完美呈現。即使IE 7！但在Firefox 18上，圖像完全不顯示。這裏是我的代碼：圖像鏈接不會在Firefox上顯示

<div id="follow-wrapper"> 
    <p>Follow Us</p> 
    <ul> 
     <li><a href="#"><img id="facebook-img"/></a></li> 
     <li><a href="#"><img id="twitter-img"/></a></li> 
     <li><a href="#"><img id="googleplus-img"/></a></li> 
     <li><a href="#"><img id="linkedin-img"/></a></li> 
     <li><a href="#"><img id="youtube-img"/></a></li> 
     <li><a href="#"><img id="rss-img"/></a></li> 
    </ul> 
</div> 


#follow-wrapper { 
    position: absolute; 
    right: 0px; 
    top: 15px; 
    width:230px; 
} 

#follow-wrapper p { 
    float:left; 
    font-family:'Arial', Gadget, sans-serif; 
    font-size: 15px; 
    color : #20417f; 
} 

#follow-wrapper ul { 
    float:left; 
    list-style: none;  
} 

#follow-wrapper ul li { 
    display: inline;  
    margin-left:8px; 
} 


#follow-wrapper ul li a img { 
    border: none; 
} 

#follow-wrapper ul li img { 
    background-image: url('../img/follow.png'); 
    background-repeat: no-repeat; 
    width: 16px; 
    height: 16px; 
    border-radius: 2px; 
} 

#facebook-img{ 
    background-position: 0px 0px; 
} 

#twitter-img { 
    background-position: 0px -26px; 
} 

#googleplus-img{ 
    background-position: 0px -52px; 
} 

#linkedin-img{ 
    background-position: 0px -78px; 
} 

#youtube-img{ 
    background-position: 0px -104px; 
} 

#rss-img{ 
    background-position: 0px -130px; 
}

下面是在Chrome結果： enter image description here

這裏是爲FF： enter image description here

我不知道發生了什麼事情。

來源

2013-02-11 Rafael Adel

您是否已通過用'div'標籤替換'img'標籤進行了測試？ – 2013-02-11 16:07:53

我從來沒有見過任何人嘗試過在img標籤上設置背景圖片。我並不覺得它奇怪地行事。你爲什麼要這樣做，而不是僅僅使用img標籤的src屬性來正常顯示圖像？ – 2013-02-11 16:08:35

看，你應該使用'img'和'src'屬性。這不是可選的，所以如果你沒有得到你夢寐以求的結果，不要感到驚訝。在大多數情況下，將'img'與sprite技術混淆是不幸的。而且，這些小圖像實際上是鏈接，那麼簡單地設計'a'元素並且根本沒有任何'img's呢？ – kapa 2013-02-11 16:09:19

http://www.w3.org/MarkUp/html3/img.html

「SRC是強制性的。」
編輯：澄清 - src是img元素的強制性屬性。

Guess FF是按規則玩的唯一瀏覽器。但重點是，您的代碼無效。

您未使用此代碼保存任何代碼：<a href=""><img id...></a> vs <a href="" id=""></a>。如果有的話，你寫的更多。

來源

2013-02-11 16:57:11 Dawson

兩個選擇：

削減了你的精靈，並使用img標籤，因爲它是爲了與個人圖像的SRC使用。
使用你的精靈，但將它應用到錨標記而不是img標記。

來源

2013-02-11 16:12:22

圖像鏈接不會在Firefox上顯示

回答

相關問題