图像链接不会在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上显示

回答

相关问题