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

Question

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

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

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

我已经尝试过将显示设置为所有可能的值（包括“表格行”，“磨合”，“紧凑”等“模糊”），但都没有运气。 甚至可以创建一个与IMG具有相同布局行为的DIV吗？

我愿意拥有比单个DIV更复杂的东西，但是我已经尝试了那里明显的东西（一个DIV在另一个内部DIV设置为显示的内部：阻止外部设置显示：内联）但我避风港找不到那种方法可以合并。

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

Answer 1

你试过display: inline-block; ？

你可能还需要使用display: -moz-inline-block; 对于firefox2

Answer 2

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

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

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

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

来源Mozilla开发人员中心

Answer 3

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