1

我有一个列表，我在其中使用背景图像 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

将您的 sprite 转换div为span应该可以解决 W3C 验证问题。正如@matthewpavkov 指出的那样div，允许 inli但不允许 in a。

由于标签是浮动的，因此不需要spancss 。display:block;

于 2013-03-06T02:47:08.740 回答
0

使用 span 标签而不是 div 标签。问题解决了。

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

于 2013-03-06T02:20:55.353 回答