CSS Sprite图像必须在每个项目之间有X个空格吗？

Question

我遇到了问题，有一段时间我一直想弄清楚如何解决这个问题。我将在下面详细描述......

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

我的第一个例子看看我希望它是怎样的。当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的MESSED UP http://jsfiddle.net/jasondavis/Mt87G/5/

帮帮我？

好的我知道我可以改变精灵图像，使图像中的每个对象周围都有巨大的空间，然后你就不会注意到这个问题，但我真的想以正确的方式解决这个问题。我的意思是有可能做我想用CSS做的事情或者图像需要间隔出来吗？我已经看到了其他精灵图像，它们像我一样紧密相连，我看到一些像100px一样的地方。

如果你知道如何解决这个问题，请帮助我，我已经尝试了一些我能想到的没有运气的东西。我需要大规模地做这个，所以我想在我这样做之前正确地完成它。感谢您的帮助

Answer 1

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

<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 */
}

如果您希望图标成为链接的一部分，则之前应该在锚点上。如果锚下划线，则会加下划线。

如果你把它放在li上，链接仍然可以加下划线而不用带下划线的图标，但为了使它可以点击，你需要在锚点上使用填充物来制作一些魔法。

注意：正如jimplode所提到的，这不适用于IE＆lt; = 7所以如果你需要它在那里工作（对你而言伤心），最好使用额外的标记。

Answer 2

写得好的问题！我将你的两个样品小提琴简化为一个小提琴：

http://jsfiddle.net/Mt87G/6/

似乎在16px变体中，由于字体较大，因此线条高度变大，图像显示的更多。

编辑：显然SO也使用精灵，例如参见this image。例如，如果我使用firebug来增加“投票”按钮的行高，那么下一个精灵会在某个时刻开始显示。

所以，如果你跟随他们的领先，你似乎可以：

• 在元素上设置固定高度
• 在精灵之间留出一些空间，只是为了确保

对你的问题严格回答然后似乎“不，没必要”。

Answer 3

我认为你可以在图像之间留出更多的空间。 如果您有单独的图像，那么您可以使用http://spritegen.website-performance.org/创建精灵图像，并且可以在精灵图像之间提供自定义空间。

如果您要动态更改字体大小，那么您也可以使用更多空间的精灵，并且只能更改背景位置。

Answer 4

1. 关闭范围
2. 设置此范围的width，height，float和margin-top以与行高的基线对齐

试试这个： http://jsfiddle.net/Mt87G/19/

CSS

#first a{
     font-size: 10px;
     padding-left: 5px;
     line-height: 12px;
}
#second a{
    font-size: 22px;
    line-height: 25px;
    padding-left: 5px; 
}
.meta-img{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    width: 13px;
    height: 12px;
    float: left;
}
#first .meta-img{
    margin-top: 4px
}
#second .meta-img{
    margin-top: 7px
}

HTML

<p id="first">
    <a href="#">
        <span class="meta-img"></span>Test link
    </a>  
</p>    

<p id="second">
    <a href="#">
        <span class="meta-img"></span>Test link
    </a> 
</p>

Answer 5

当您在锚点上有背景图像时，您总是可以在图像的锚点内放置一个跨度，这样您就可以控制跨度的宽度和高度，而跨度又只显示图像的一部分想要它使用。

Answer 6

由于我在移动版Safari上看到的舍入错误，我通常在精灵之间留下几个像素。如果精灵之间只有1个像素，有时在元素的边缘处有下一个精灵的头发宽度的条子。添加一点缓冲室可以避免这个问题。如果您使用的是PNG文件，由于它们的压缩方式，没有太多额外的文件大小（极小的增加）和更大的间距。