我的页面中有一段 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 不会在任何浏览器中显示。浏览器只是忽略它。这是萤火虫显示的内容:
第二个是在 Firefox 中显示的唯一图像是 twitter 图像。在 chrome 和 opera 中,所有其他的都正确显示。由于它们在其他浏览器中正确显示,我认为问题不在于背景属性中的路径。
关于问题可能是什么的任何想法?
编辑:
检查萤火虫对背景图像路径的说明:
它说它无法加载给定的 url。