div / span和sprites

Question

我用精灵替换了我网站上的大多数内联图片。

sprite类将包含一些基本的css：

.sprite{
background-image:url(...);
background-position:...;
width: 16px;
height:16px;
}

我看到锚标记内的嵌套div不是一个好主意。

<a><div class="sprite"></div></a>

我试图将sprite添加到span元素中。

<a><span class="sprite"></span></a>

但是span元素不会扩展到我设置的宽度和高度。 能够使用span元素用sprite替换图像标签是非常有用的。 我可以在span元素中添加一个空白的gif图像来展开它。但这会打败我想要使用精灵的原因（减少http请求的数量）。

在锚标记内使用div元素是不正确的。

那么如何在锚元素中使用精灵呢？

并且总是存在对齐div的问题。如果图像在另一个元素中居中，我该如何用精灵替换它？

Answer 1

您需要在display: block;元素上声明span，这些元素默认为内联元素。类似的东西：

.sprite{
    display: block;
    background-image:url(...);
    background-position:...;
    width: 16px;
    height:16px;
}

这应该使span元素扩展到您想要的宽度/高度。

希望这有帮助！