Question

所有。我有一些奇怪的故障，我的CSS精灵在下面的代码中显示：

<footer>
    <div id="social">
        <a href="#" target="_blank" class="socialicons twitter">Twitter</a>
        <a href="#" target="_blank" class="socialicons linkedin">Linked In</a>
        <a href="#" target="_blank" class="socialicons facebook">Facebook</a>
        <a href="#" target="_blank" class="socialicons google">Google</a>
        <a href="#" target="_blank" class="socialicons flickr">Flickr</a>
        <span class="email">dan&#64;fifthgospelministries.com</span>
        <span class="phone">717-395-1234</span>
    </div>
</footer>

当文件保存为html文件时，它可以正常工作，但当我将其转换为php文件时，图像会中断。

可以在idealbrandon.com/new/index.php（破损）和idealbrandon.com/new/index.html（工作）上查看。

编辑我忘了包含css。相关的CSS在这里：

footer{
    background: #323232;
    padding: 3em;
}

#social{
    width:60%;
    margin: 0 auto;
    text-align:center;
    width:250px;
    height:135px;
    padding-bottom:1em;
}

#social a{
    display:block;
}

.socialicons {
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 0;
    text-indent: -9999px;
    float:left;
}

.twitter{  background: url('img/social.png') 0 0; }
.linkedin{ background: url('img/social.png') 200 0; }
.facebook{ background: url('img/social.png') 150 0; }
.google{   background: url('img/social.png') 100 0; }
.flickr{    background: url('img/social.png') 50 0; }

.twitter:hover{   background: url('img/social.png') 0 50; }
.linkedin:hover{  background: url('img/social.png') 200 50; }
.facebook:hover{  background: url('img/social.png') 150 50; }
.google:hover{    background: url('img/social.png') 100 50; }
.flickr:hover{     background: url('img/social.png') 50 50; }

.email{
    background-color:#8b8b8b;
}

.phone{
    background-color:#a6a6a6;
}

.email, .phone{
    font-weight: 400;
    color:#fff;
    display: block;
    float: left;
    width: 250px;
    height: 50px;
    text-align: center;
    line-height: 3.2;
}

.email:hover, .phone:hover{
    color:#fff;
    background-color:#9c1e20;
}

这里有什么想法吗？

Answer 1

在CSS（style.css第306行）中：

.linkedin{ background: url('img/social.png') 200 0; }

应该是：

.linkedin{ background: url('img/social.png') 200px 0; }

非零时，CSS中通常需要单位。

破碎的CSS Sprites

1 个答案: