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;
}

这里发生的是我有两个奇怪的问题:

首先,元素 li.google-plus 不会在任何浏览器中显示。浏览器只是忽略它。这是萤火虫显示的内容:

Google+ 元素已停用

第二个是在 Firefox 中显示的唯一图像是 twitter 图像。在 chrome 和 opera 中,所有其他的都正确显示。由于它们在其他浏览器中正确显示,我认为问题不在于背景属性中的路径。

关于问题可能是什么的任何想法?

编辑:

检查萤火虫对背景图像路径的说明:

萤火虫说“无法加载给定的网址”

它说它无法加载给定的 url。

4

2 回答 2

0

in.sidebar ul li和 inli.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 回答