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 (壊れています) と ideabrandon.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 に答える