php - 损坏的 CSS Sprite

Question

全部。我的 CSS Sprite 出现了一些奇怪的故障，显示在以下代码中:

<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 中通常需要单位。