Question

我有一个列表，我在其中使用背景图像CSS sprites作为链接。我遇到的问题是我想在sprite周围填充，而不必返回并重新创建我的所有图像。我能让它正常工作的唯一方法是使用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;
}

Answer 1

将精灵div转换为span可以解决W3C验证的问题。正如@matthewpavkov指出，div允许li但a不允许{。}}。

由于span代码已浮动，因此不需要css display:block;。

Answer 2

使用span标签代替div标签。问题解决了。

但是，我建议重新创建精灵，只是为了完全使用更多的语义代码。

填充元素内的CSS精灵

2 个答案: