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要素の必須属性です。

FFはルールに従って動作する唯一のブラウザだと思います。しかし、要点は、あなたのコードは有効ではないということです。

これを使用してコードを保存していません：<a href=""><img id...></a>vs <a href="" id=""></a>。どちらかといえば、あなたはもっと書いています。

于 2013-02-11T16:57:11.150 に答える
1

2つの選択肢：

  1. スプライトを切り取り、個々の画像のsrcで使用するためのimgタグを使用します。

  2. スプライトを使用しますが、imgタグではなくアンカータグに適用します。

于 2013-02-11T16:12:22.973 に答える