图片链接不会出现在Firefox上

Question

我有几个嵌套在锚标签内的图像。它们在Chrome和IE上完美呈现。即使是IE 7！ 但在Firefox 18上，图像根本没有出现。这是我的代码：

<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上的结果：

这是FF的：

我不知道发生了什么。

Answer 1

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

“ SRC 是强制性的。”
编辑：澄清 - src 是img元素的必填属性。

猜猜FF是唯一遵守规则的浏览器。但问题是，您的代码无效。

您没有使用此保存任何代码：<a href=""><img id...></a> vs <a href="" id=""></a>。如果有的话，你写得更多。

Answer 2

两种选择：

1. 剪切你的精灵并使用img标签，因为它意味着与单个图像的src一起使用。

2. 使用您的精灵，但将其应用于锚标记而不是img标记。