我编写了一段代码，根据页面中的IMG标签自动创建CSS精灵，并用DIV替换它们，使用适当的CSS将精灵图像定位为背景，以显示适当的部分 - 问题是我无法让DIV作为IMG的替代品。如果我保留默认的"display"值设置为"block"，那么如果原始IMG被定位在某些文本的末尾，替换的DIV将跳到文本后面的下一行（这当然是我期望display:block的行为）。如果我将"display"更改为"inline"，那么DIV将与文本保持在同一行，但它会忽略我设置的"width"和"height"并且会折叠。我尝试在DIV内放置 ，但它只占用足够包含nbsp的宽度。我尝试过将"display"设置为所有可能的值（包括“模糊”的值，如“table-row”、“run-in”、“compact”等），但都没有成功。是否有可能创建一个具有与IMG相同布局行为的DIV？我可以接受比单个DIV更复杂的东西，但是我已经尝试了明显的方法（一个DIV在另一个DIV内，其中内部DIV设置为display:block，外部DIV设置为display:inline），但我还没有找到可行的组合。我总是可以在替换的IMG/DIV之外做一些特定的事情来获得我想要的布局，但我的目标是拥有一个通用的自动CSS精灵机制，无论HTML的其余部分如何都可以工作。
3个回答
13
你试过使用display: inline-block;吗？
对于Firefox2，您可能还需要使用display: -moz-inline-block;
- Andy Ford
4
图片有一个等价的"display: inline-block"。这最初并没有包含在CSS中，但是后来添加了一部分，以解决图像表现出这种行为的事实。
问题在于所有浏览器现在才开始支持它。如果您想支持甚至一年前的浏览器，您就会被卡住。
另一个解决方案是将div浮动（"float: left"），虽然不是很好。
inline-block：在CSS 2.1中引入。这会导致元素生成一个块级元素框，将与周围内容一起流动，就像它是一个单个的内联框一样(就像替换元素[即图像]一样）。
- Seamus
1
Display: inline-block 在这种情况下应该可以工作。你试过了吗？
- buti-oxa
1
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
display: -moz-inline-block; display: inline-block;但这确实起到了作用。 - John