1

私のページには、次のようなコードの html 部分があります。

<section class ="sidebar">
            <ul>
                <li class="facebook">Facebook</li>
                <li class="linkedin">LinkedIn</li>
                <li class="twitter">Twitter</li>
                <li class="google-plus">Google+</li>
            </ul>
</section>

そしてcssは次のようになります：

    .sidebar ul {
    float: left;
}

.sidebar ul li{
    display: block;
    width:35px;
    text-indent: -9999px;
    margin: 3px;
}

li.facebook{
    height: 35px;
    background: url(img/icon_face.png) center center no-repeat;
    background-size: contain;
}
li.twitter{
    height: 35px;
    background: url(img/icon_twitter.png) center center no-repeat;
    background-size: contain;
}
li.google-plus{
    height: 35px;
    background: url(img/icon_g+.png) center center no-repeat;
    background-size: contain;

}
li.linkedin{
    height: 35px;
    background: url(img/icon_in.png) center center no-repeat;
    background-size: contain;
}

ここで何が起こるかというと、2 つの奇妙な問題があります。

まず、要素 li.google-plus はどのブラウザにも表示されません。ブラウザはそれを無視します。firebug が示す内容は次のとおりです。

Google+ 要素が無効になっています

2 つ目は、Firefox で表示される画像は Twitter の画像だけです。クロムとオペラでは、他のすべてのものは正しく表示されます。他のブラウザでは正しく表示されているので、問題はバックグラウンド プロパティのパスではないと思います。

問題が何であるかについて何か考えはありますか？

編集：

背景画像のパスについてfirebugが何を言っているかを確認してください：

firebug が「指定された URL を読み込めません」と言う

指定された URL を読み込めなかったと表示されます。

4

2 に答える 2

0

in.sidebar ul liと inなどの両方。設定しなかったプロパティとを記述li.facebook,li.twitterする必要があります。width:height:

于 2013-10-02T15:12:36.613 に答える
0

わかりました。問題は私の AdBlock 拡張機能であることがわかりました。無効にした後、正常に動作するようになりました。

この答えを通してそれを理解しました：https://stackoverflow.com/a/466020/1235708

于 2013-10-24T16:55:06.447 に答える