css - 社交媒体 html css 的图标列表

Question

我正在尝试一个包含社交媒体图标的列表。我想使用 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>

所有图像都有效并且已经过测试

Answer 1

首先，您指定了background-repeat两次无效的 CSS 属性，尽管这些属性将被忽略，最好删除它们。

问题可能与您的background-position值有关..因为您没有在您的<ul>（它是一个块元素，默认情况下它占用所有可用宽度）上指定宽度，使用 50% 50% 将您的 bg-image 放置在视口宽度的一半这意味着它出现在你之外，<ul>即使它在技术上不是。给你一个固定的宽度，<ul>这样背景图像就相对于那个固定的容器，而不是整个视口。