1

全部。我的 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;
}

这里有什么想法吗？

4

1 回答 1

1

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

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

应该：

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

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

于 2013-10-15T06:14:33.277 回答