填充元素内的 CSS Sprites

Question

我有一个列表，我在其中使用背景图像 CSS Sprite 作为链接。我遇到的问题是我想在 Sprite 周围填充而不必返回并重新创建我的所有图像。我能让它正常工作的唯一方法是对实际的 Sprite 使用一个 div，否则填充会导致 Sprite 的另一半可见。

问题是这不是 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;
}

Answer 1

将 Sprite div 转换为 span 应该可以解决 W3C 验证问题。正如@matthewpavkov 指出的那样，div 可以在 li 中使用，但不能在 a 中使用。

由于 span 标签是 float 的，因此不需要 css display:block;。