0

我有几个嵌套在锚标签内的图像。它们完美地出现在 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 ： 在此处输入图像描述

我不知道是怎么回事。

4

2 回答 2

4

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-11T16:57:11.150 回答
1

两种选择：

  1. 剪下你的精灵并使用 img 标签，因为它是用来与单个图像的 src 一起使用的。

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

于 2013-02-11T16:12:22.973 回答