CSS精灵图中的图像之间必须有X个空格吗？

Question

我有一个问题，已经有一段时间了，我一直在尝试解决这个问题。我将在下面很好地描述它...

我试图将图像用作UL列表的精灵图像。 它应该显示一个带有文本的图标，图标和文本都应链接到某个位置。

我的第一个示例看起来像我想要的。 当字体大小设置为10px时，它看起来还不错...

一旦我将字体大小从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;
}

The 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/

请帮帮我？

我知道我可以改变精灵图像，让图像中的每个对象周围都有大量空白，这样就不会出现这个问题了，但我真的想用正确的方法解决这个问题。我的意思是，是否可能只使用 CSS 就能做到我正在尝试做的事情，还是必须将图像间距分开？我已经看过其他精灵图像，它们都很接近，也像我的一样很紧凑，还有一些则每个对象之间相隔像素都有100个。

如果您知道如何解决，请帮帮我，我已经尝试了所有能想到的方法，但没有成功。我需要在大规模上进行此操作，因此我希望在开始之前正确地完成它。谢谢任何帮助。

- JasonDavis

---

你没有闭合<span>标签的原因是什么？ - Klaus Byskov Pedersen

越接近越好，文件大小越小越好。 - 472084

Answer 1

我建议使用:before伪元素。将类添加到您的锚链接或列表项，并样式化伪元素以容纳精灵图像。这与在span上设置特定大小的效果相同，无需额外的标记。

<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应该放在锚点上。如果锚点有下划线，那么图标也会有下划线。

如果你把它放在li上，即使没有下划线，链接仍然可以被下划线，但是要使其可点击，你需要在锚点上使用padding来实现。

注意：正如jimplode所提到的，这在IE <= 7中不起作用。因此，如果你需要在IE <= 7中使用它（很遗憾），最好使用额外的标记。

- Gidgidonihah

Answer 2

问题写得很好！我将您的两个样本 fiddle 简化成一个 fiddle：

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

似乎在 16px 变体中，由于字体大小更大而使行高变大，因此图像只是显示得更多一些。

编辑：显然 SO 也使用精灵图，例如此图像。如果我使用 firebug 来增加 “投票” 按钮的行高，例如，在某些时候下一个精灵就开始出现了。

因此，如果您遵循他们的建议，那么似乎您可以：

• 在您的元素上设置固定高度
• 留下一些空间放置精灵图，以确保准确性

严格回答您的问题是“不需要”。

- Jeroen

Answer 3

我认为您可以在图像之间增加更多的空格。 如果您有单独的图像，则可以使用http://spritegen.website-performance.org/创建雪碧图，并且您可以提供雪碧图中自定义间距。 如果您正在动态更改字体大小，则也可以使用具有更多间隔的精灵图，并且只能更改背景位置。

- Deviprasad Das

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>

- user920041

Answer 5

由于您在锚点上有背景图像，因此您可以始终在锚点内放置一个 span 元素来显示图像。这样，您就可以控制 span 元素的宽度和高度，从而只显示您想要使用的图像部分。

- jimplode

---

+1 这种方法从长远来看更加灵活，可以实现网格布局而不是垂直布局（50个以上的图标=一个长垂直精灵文件）。缺点是需要额外的标记。Jquery 在其 UI 按钮图标中使用了这种技术。 - Syri

使用span的缺点是会增加额外的标记。使用伪元素可以在不增加垃圾代码的情况下实现相同的效果。 - Gidgidonihah

虽然与伪元素不同，但它的优点是可以在所有浏览器中运行。 - jimplode

Answer 6

我通常在精灵之间留下几个像素，以避免移动版Safari上出现的舍入误差。如果精灵之间只有1个像素，有时在元素边缘会出现下一个精灵的头发宽度的薄片。增加一些缓冲区可以避免这个问题。如果您使用PNG文件，则由于它们的压缩方式，更多的间距并不会增加太多文件大小（极小的增加）。

- Nate B