1

リンクに background-image CSS スプライトを使用しているリストがあります。私が抱えていた問題は、戻ってすべての画像を再作成することなく、スプライトの周りにパディングしたいということでした。正しく動作させる唯一の方法は、実際のスプライトに div を使用することでした。そうしないと、パディングによってスプライトの残りの半分が表示されます。

問題は、これが W3C で有効でないことです。div を li に含めることはできません。少なくともそうすべきではありません。

<div id="social-bar">
    <ul id="social-links">
        <li>
            <a href="http://twitter.com" title="Twitter">
                <div class="sprite twitter">Twitter</div>
            </a>
        </li>
        <li>
            <a href="http://facebook.com" title="Facebook">
                <div class="facebook sprite">Facebook</div>
            </a>
        </li>
        <li>
            <a href="http://instagram.com" title="Instagram">
                <div class="instagram sprite">Instagram</div>
            </a>
        </li>
        <li>
            <a href="http://www.youtube.com" title="YouTube">
                <div class="youtube sprite">YouTube</div>
            </a>
        </li>
    </ul>
</div>

#social-bar {
    /*margin-left:auto;*/
    /*margin-right:auto;*/
    width:100%;
    text-align:center;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
    /*background-color:#f9f9f9;*/
    /*border-top: 1px solid #f9f9f9;*/
    /*border-bottom: 1px solid #f9f9f9;*/
}
#social-links {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    text-indent:0px;
    width:100%;
}
#social-links li {
    display:inline-block;
    width:54px;
    height:54px;
    margin-left:20px;
    margin-right:20px;
    /*padding:8px;*/
    /*border: 4px solid #f9f9f9;*/
    border: 4px solid #dadada;

}
#social-links a {
    display:block;
    width:100%;
    height:100%;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    position:relative;
    overflow:hidden;
}
#social-links a:hover {
    background-color:#ff379f;
}
#social-links img {
    padding-top:8px;
}

.sprite {
    width:100%;
    height:0px;
    padding-top:38px;
    overflow:hidden;
    background-repeat:no-repeat;
    position:relative;
    float:left;
    display:block;
    font-size:0px;
    line-height:0px;
}
.sprite.twitter {
    background-image:url(/images/social/twitter-sprite.png);
    margin-top:8px;
    background-position: 4px 0px;
}
#social-links a:hover .sprite.twitter {
    background-position: 4px -38px;
}
.sprite.facebook {
    background-image:url(/images/social/facebook-sprite.png);
    margin-top:8px;
    background-position: 18px 0px;
}
#social-links a:hover .sprite.facebook {
    background-position: 18px -38px;
}
.sprite.instagram {
    background-image:url(/images/social/instagram-sprite.png);
    margin-top:8px;
    background-position: 8px 0px;
}
#social-links a:hover .sprite.instagram {
    background-position: 8px -38px;
}
.sprite.youtube {
    background-image:url(/images/social/youtube-sprite.png);
    margin-top:8px;
    background-position: 8px 0px;
}
#social-links a:hover .sprite.youtube {
    background-position: 8px -38px;
}
.sprite.rss {
    background-image:url(/images/social/rss-sprite.png);
    margin-top:8px;
    background-position: 8px 0px;
}
#social-links a:hover .sprite.rss {
    background-position: 8px -38px;
}
4

2 に答える 2

1

スプライトdivを に変換するspanと、W3C 検証の問題が解決するはずです。@matthewpavkovが指摘したように、では許可されていますが、ではdiv許可されてliいませんa。

spanタグはフローティングなのでCSSはdisplay:block;不要です。

于 2013-03-06T02:47:08.740 に答える
0

divタグの代わりにspanタグを使用します。問題が解決しました。

ただし、よりセマンティックなコードを完全に使用するために、スプライトを再作成することをお勧めします。

于 2013-03-06T02:20:55.353 に答える