Question

我是跨浏览器测试，我在ie8中遇到了一个问题，它没有显示我在所有其他浏览器中工作的背景社交精灵。

这是我的代码：

    <!-- Social Icon List -->
<ul class="social-icons">
    <li style="text-align: center;"><a title="Follow us on Twitter" href="#"><span class="social"> </span></a></li>
    <li style="text-align: center;"><a title="Follow us on facebook" href="#"><span class="social fbook"> </span></a></li>
    <li style="text-align: center;"><a title="Follow us on Youtube play" href="#"><span class="social gplay"> </span></a></li>
</ul>
<p style="text-align: center;">#DecadeInTheCity</p>
<!-- Ends Social Icon List -->

和css：

.social{
    width:32px;
    height:32px;
    margin-top:7px;
    background:url(../../uploads/2014/11/social-icons.png)no-repeat;
    display:inline-block;
    background-position:left top;
    text-indent:-5000px;
}

.entry-content-wrapper div li {
    text-indent: 0;
    display: inline-block;
    margin: 3px;
}

.fbook{
    background-position:-32px;
}

.instagram{
    background-position:-64px;
}

.gplay{
    background-position:-96px;
}

有什么办法可以让它显示出来吗？

谢谢，瑞奇。

Answer 1

您可以使用内联样式，然后它将适合您。

如下所示 -

<li style="text-align: center;"><a title="Follow us on Twitter" href="#"><span class="social" style="background:url('../../uploads/2014/11/social-icons.png') no-repeat;"> </span></a></li>

背景精灵没有在ie8中显示

1 个答案: