如何让DIV像IMG一样用作CSS精灵呢？

Question

我编写的代码会根据页面中的IMG标记自动创建CSS精灵，并用DIV替换它们（我认为是）适当的CSS，将精灵图像定位为背景，让相应的部分显示出来 - 问题是我不能让DIV表现为IMG替代品的下降。

如果我将默认的'display'值设置为'block'，那么如果原始IMG位于某些文本的末尾，则替换DIV将跳到文本后面的下一行（当然这就是我会期待显示的东西：阻止做。）

如果我将'display'更改为inline，那么DIV与文本保持在同一行，但忽略了我设置和折叠的'width'和'height'。我已经尝试将其放入DIV中，但它只占用足够的宽度来包含nbsp。

我尝试过将显示设置为所有可能的值（包括像'table-row'，'run-in'，'compact'之类的“模糊”等），但都没有运气。甚至可以创建一个与IMG具有相同布局行为的DIV吗？

我愿意拥有比单个DIV更复杂的东西，但是我已经尝试了那里明显的东西（一个DIV在另一个内部DIV设置为显示的内部：阻止外部设置显示：内联）但是我还没有找到那种有效的组合。

在替换的IMG / DIV之外我总能做一些特定的事情来获得我想要的布局，但我的目标是拥有一个通用的自动CSS-sprite机制，无论HTML的其余部分如何都能正常工作。 / p>

Answer 1

您是否尝试过 display：inline-block; ？

您可能还必须使用 display：-moz-inline-block; for firefox2

Answer 2

图像具有“display：inline-block”的等价物。这最初并未包含在CSS中，但部分添加是为了解决图像以这种方式运行的事实。

问题是所有浏览器现在都支持它。如果你想在一年前支持浏览器，你就会陷入困境。

另一个但不是很好的解决方案是浮动div（“float：left”）。

  

内联块：在CSS 2.1中引入。这会导致元素生成一个块元素框，该框元素框将与周围的内容一起流动，就好像它是一个单独的内联框（表现得像被替换的元素[意味着图像] 。）。

来源Mozilla开发人员中心

Answer 3

显示：内联块应该在这种情况下工作。你试过吗？