div/span和精灵

我用精灵替换了我网站上的大多数内联图像。div/span和精灵

Sprite类会包含一些基本的CSS：

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

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

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

我试着添加精灵来代替span元素。

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

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

在锚标记中使用div元素不正确。

那么我怎样才能使用锚元素内的精灵？

而且总是存在对齐div的问题。如果图片以另一个元素为中心，我如何用精灵替换它？

来源

2010-09-27 reggie

请勿将精灵用于内容图像。您牺牲了清晰的语义，可访问性和可维护性。减少HTTP请求的数量并不重要。 – Quentin 2010-09-27 12:35:06

@大卫：这不取决于图像的数量和大小？尽管这是一个代价高昂的交易，我会同意的。 – 2010-09-27 12:41:36

您需要在span元素上声明display: block;，这些元素默认为内联元素。例如：

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

这应该使span元素展开到所需的宽度/高度。

希望这会有所帮助！

来源

2010-09-27 12:33:40

我们可以将'width'或'height'添加到像span这样的内联元素，还是我们只需使用'display：block'将它转换为'div'？ – Swanand 2010-09-27 12:46:58

你几乎只是将它转换为'div'。 – Kyle 2010-09-27 12:55:14

是的，你可以为宽度添加宽度和/或高度属性，但是除非你改变它的行为，这是'display：block;'进场的地方，否则它们将被忽略，并且没有，元素没有被“转换“ - 它仍然是一个”跨度“ - 但它的默认行为正在改变，它会像'div'一样行事。希望这是有道理的。 – 2010-09-27 12:57:18

div/span和精灵

回答

相关问题