html - 背景 Sprite 在 ie8 中不显示

Question

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

这是我的代码:

    <!-- 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>