html - 如何让 DIV 像 IMG 一样用作 CSS Sprite ？

Question

我已经编写了代码，可以根据页面中的 IMG 标签自动创建 CSS Sprite ，并将它们替换为具有(我认为的)适当 CSS 的 DIV，以将 Sprite 图像定位为背景，让适当的部分显示出来——问题是我无法让 DIV 充当 IMG 的替代品。

如果我将默认的“显示”值设置为“ block ”，那么如果原始 IMG 位于某些文本的末尾，则替换 DIV 将跳到文本后的下一行(这当然是我会期望有 display: block 做的事情)。

如果我将“显示”更改为内联，则 DIV 将与文本保持在同一行，但它会忽略我设置的“宽度”和“高度”并折叠。我试过将 的放在 DIV 中，但它只占用足够的宽度来包含 nbsp。

我尝试过将显示设置为所有可能的值(包括“模糊”值，如“table-row”、“run-in”、“compact”等)，但都没有成功。甚至可以创建与 IMG 具有相同布局行为的 DIV 吗？

我愿意接受比单个 DIV 更复杂的东西，但是我已经尝试了那里明显的东西(一个 DIV 在另一个里面，其中内部 DIV 设置为显示: block ，外部设置为显示:内联)但我也没有找到有效的组合。

除了替换的 IMG/DIV 之外，我总是可以做一些特定的事情来获得我想要的布局，但我的目标是拥有一个通用的自动 CSS 子画面机制，无论 HTML 的其余部分如何。

Answer 1

您尝试过 display: inline-block; 吗？

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