精灵的HTML

Question

所以我设置了Compass来创建SCSS的自动精灵。一切顺利，它为我生成了一些不错的CSS： -

.icons-sprite, .actions-new, .actions-edit, .actions-save, .actions-delete, .actions-refresh {
  background: url('/content/themes/admin/images/icons-s0336d5eb89.png') no-repeat;
}

.actions-new {
  background-position: 0 -48px;
}

... ... ...

现在我正在创建一个表，在该表中有一个“Action列”，您可以在其中执行行上的功能（删除或编辑）。

使用精灵显示这些按钮的普遍接受方式（在html 5中）是什么？

我已经探索了一些选项并遇到了一些问题

• span除非我将其置于display: block模式，否则无法显示此内容，如果我这样做，则会在项目后插入新行，而我不想必须漂浮一切

• div由于某种原因，这个甚至没有显示

• img我看到的最大问题是src字段的要求，这意味着我需要一遍又一遍地重复网址。

其他人在链接中使用精灵做什么？

Answer 1

使用span和display: inline-block。这将使跨度的行为类似于图像，因此您可以应用vertical-align: middle。如果你在内联元素上使用它，支持会一直回到IE6。