如何使 DIV 表现得像 IMG 一样用作 CSS 精灵？
我编写了代码，可以根据页面中的 IMG 标签自动创建 CSS 精灵，并用 DIV 替换它们，并使用（我认为是）适当的 CSS 将精灵图像定位为背景，让适当的部分显示出来 - 问题是我无法让 DIV 充当 IMG 的替代品。
如果我将默认的“显示”值设置为“块”，那么如果原始 IMG 位于某些文本的末尾，则替换 DIV 将跳到文本后的下一行（这当然是我所期望的）与显示：阻止做）。
如果我将“显示”更改为内联，则 DIV 与文本保持在同一行，但它会忽略我设置的“宽度”和“高度”并折叠。 我尝试将 放入 DIV 中，但它只占用足够的宽度来包含 nbsp。
我尝试过将显示设置为所有可能的值（包括“模糊”的值，如“table-row”、“run-in”、“compact”等），但都没有成功。 是否可以创建与 IMG 具有相同布局行为的 DIV？
我愿意接受比单个 DIV 更复杂的东西，但是我已经尝试了那里显而易见的事情（一个 DIV 位于另一个 DIV 中，内部 DIV 设置为显示：块，外部设置为显示：内联），但我还没有那里也没有找到有效的组合。
在替换的 IMG/DIV 之外，我总是可以做一些特定的事情来获得我想要的布局，但我的目标是拥有一个通用的自动 CSS 精灵机制，无论 HTML 的其余部分如何，它都可以工作。
I have written code that automatically creates CSS sprites based on the IMG tags in a page and replaces them with DIV's with (what I thought was) appropriate CSS to position the sprite image as a background letting the appropriate part show through -- the problem is that I cannot get DIVs to behave as drop in replacements for IMGs.
If I leave the default 'display' value set to 'block' then if the original IMG was positioned at the end of some text, the replacement DIV will jump down to the next line after text (which of course is what I would expect something with display: block to do).
If I change the 'display' to inline, then the DIV stays on the same line as the text but it ignores the 'width' and 'height' I have set and collapses. I've tried putting 's inside the DIV but it then only takes up enough width to contain the nbsp.
I've tried experimenting with setting display to all possible values (including the "obscure" ones like 'table-row', 'run-in', 'compact', etc) but all with no luck. Is it even possible to create a DIV with the same layout behavior as an IMG?
I am open to having something more complicated than just a single DIV, however I've tried the obvious things there (one DIV inside another where the inner DIV is set to display: block with the outer set to display: inline) but I haven't found a combination there that works either.
There are always specific things I can do outside of the replaced IMG/DIV to get the layout I want, but my goal is to have a generic auto-CSS-sprite mechanism that works regardless of the rest of the HTML.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您尝试过
display: inline-block;吗？对于 firefox2，您可能还必须使用
display: -moz-inline-block;Did you try
display: inline-block;?you may have to also use
display: -moz-inline-block;for firefox2图像相当于“display: inline-block”。 它最初并未包含在 CSS 中，但添加的部分目的是为了解决图像的这种行为方式。
问题是所有浏览器现在都支持它。 如果您想支持一年前的浏览器，您就会陷入困境。
另一个但不是那么好的解决方案是浮动 div（“float：left”）。
来源 Mozilla 开发者中心
Images have an equivalent of "display: inline-block". This was not originally included in CSS but was added in part to address the fact that images behave this way.
The issue is that all browsers are just now supporting it. If you want to support browsers from even a year ago, you are stuck.
Another, but not as great, solution is floating the div ("float: left").
Source Mozilla Developer Center
Display: inline-block 应该在这种情况下工作。 你尝试过吗？
Display: inline-block is supposed to work in this situation. Did you try it?