我正在尝试使用包含社交媒体图标的列表。我想使用nth child:但不支持IE,因此我使用以下方法。但是我没有任何建议-不显示图标?

ul.socialmedia {
color: #000000;
margin:0;
padding:0;
}

li.fb {
background:url('images/Facebook_icon.png') 50%    50% no-repeat no-repeat;
padding-left: 10px;
}

li.gp {
background:url('images/googleplus_icon.png') 50% 50% no-repeat no-repeat;
padding-left: 10px;
}

li.tw {
background:url('images/twitter-icon.png') 50% 50%  no-repeat no-repeat;
padding-left: 10px;
}


HTML:

<ul class="socialmedia">
<li class="fb"><strong>FACEBOOK</strong></li>
<li class="gp"><strong>GOOGLE+</strong></li>
<li class="tw"><strong>TWITTER</strong></li>
</ul>


所有图像均已工作并且已经过测试

最佳答案

首先,您要指定两次background-repeat属性,这是无效的CSS,尽管最好删除这些属性将其忽略。

问题可能与您的background-position值有关..因为您未在<ul>上指定宽度(它是一个块元素,默认情况下会占用所有可用宽度),所以使用50%50%放置bg图像视口宽度的一半,这意味着它在<ul>外部显示,即使从技术上讲不是这样。给您的<ul>设置一个固定的宽度,以便背景图像是相对于该固定容器而不是整个视口的。

10-08 06:14
查看更多