Question

我正在尝试使用社交媒体图标的列表。我想使用第n个孩子：但没有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>指定固定宽度，使背景图像相对于固定容器，而不是整个视口。

社交媒体html css的图标列表

1 个答案: