css - CSS Sprite 图像是否必须在每个元素之间有 X 量的空间？

Question

我有一个问题，有一段时间我一直在想办法解决这个问题。我将在下面很好地描述它......

我正在尝试将图像用作 UL 列表的 Sprite 图像。它应该显示一个旁边带有文本的图标，图标和文本都应该链接到某个地方。

我的第一个例子是我想要的样子。当 font-size 设置为 10px 时，它看起来不错......

一旦我将 font-size 从 10px 更改为 16px...

这是 CSS 和 HTML

CSS

#post-meta-wrapper{
    list-style: none;
    margin:20px 0 20px 20px;
    width:400px;
}

#post-meta-wrapper li {
    width:100%;
    color: #44495B;
    border-top: 1px dotted #CCC;
    color: #999;
    font-size: 10px;
    line-height: 28px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-indent: 0px;
}
#post-meta-wrapper li a{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    padding-left:15px;
}

#post-meta-wrapper .meta-img {
    background:#fff;
    width: 15px;
    height: 10px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 8px;
    overflow: hidden;
}

#post-meta-wrapper a:hover,
#post-meta-wrapper .active{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -195px;
    width: 15px;
    height: 10px;
}

HTML

<ul id="post-meta-wrapper">
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#" class="active"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
   
</ul>

JSFiddle 示例

这是第一个font-size: 10px http://jsfiddle.net/jasondavis/Mt87G/4/

这是一团乱麻，font-size: 16px http://jsfiddle.net/jasondavis/Mt87G/5/

帮帮我？

好的，我知道我可以更改 Sprite 图像，使图像中的每个对象周围都有巨大的空间，这样您就不会注意到这个问题，但我真的很想以正确的方式解决这个问题。我的意思是是否可以仅使用 CSS 来完成我想做的事情，或者图像是否需要间隔开？我见过其他 Sprite 图像，它们像我的一样靠得很近，我也见过一些所有东西都相隔 100 像素的图像。

如果你知道如何解决这个问题，请帮助我，我已经尝试了所有我能想到的方法，但还没有成功。我需要大规模地做这件事，所以我想在我做之前把它正确地完成。感谢您的帮助

Answer 1

我建议使用 :before 伪元素。将类添加到您的 anchor 链接或列表项，并设置 pseduo 元素的样式以保存 sprite 图像。这与无需额外标记即可在跨度上设置特定大小的效果相同。

<li class="icon">
    <a href="#">Test Link<a/>
<li>

.icon:before{
    content: '';
    width: 10px;
    height: 10px;
    display: block;
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    /* other css for positioning */
}

如果你想让图标成为链接的一部分，before 应该在 anchor 上。如果 anchor 有下划线，它会被加下划线。

如果你把它放在 li 上，链接仍然可以在没有图标下划线的情况下加下划线，但要使其可点击，你需要在 anchor 上填充一些魔法。

注意:正如 jimplode 所提到的，这在 IE <= 7 中不起作用所以如果你需要它在那里工作(为你难过)最好使用额外的标记。