如何修复 IE6 上的 display:inline-block？答案

【问题标题】：How to fix display:inline-block on IE6?如何修复 IE6 上的 display:inline-block？
【发布时间】：2011-04-14 20:16:40
【问题描述】：

如何在 IE6 上修复 display:inline-block; ？

我可以通过其他方式得到相同的结果吗？

【问题讨论】：

您已经使用 UTF-8 BOM 保存了 CSS 文件，并且在内容类型标题中没有字符集的情况下提供这些文件。我建议也修复它。我不确定在第一个 CSS 规则之前 IE6 会如何对错误编码的 UTF-8 BOM 的存在做出反应。

【解决方案1】：

在 IE6 中，您只能将 display:inline-bock 设置为真正的内联元素，例如 span 或 a。

【讨论】：

谁能解释为什么我的回答被否决了？在这里看不到任何错误信息。 IE 6/7 仅在具有自然显示的元素上接受 display:inline-block 值：inline。在这里验证quirksmode.org/css/display.html

【解决方案2】：

* html p { display: inline; zoom: 1; }

【讨论】：

【解决方案3】：

您必须在 IE 样式表中的块级元素上重新指定 display:inline;。

HTML：

<div class="ImageSlideShow">blah</div>

常规 CSS：

.ImageSlideShow { display:inline-block; }

IE CSS：

<!--[if lt IE 8]>
<style>
.ImageSlideShow { display:inline; zoom:1; }
</style>
<![endif]-->

奖励：

您还应该为.ImageSlideShow .ImageNum {} 指定display:inline; 以缓解另一个IE 错误。

【讨论】：

我知道这已经很老了，但是对于来这里的其他人（比如我自己）来说，你不需要有条件的评论。您只需要 .ImageSlideShow{display: inline-block; *显示：内联； zoom: 1;} 它会工作得很好。 IE6&7 是唯一能识别 *display 的浏览器，所以所有其他浏览器都会忽略它。
虽然可以说使用 condcom 更优雅，但为了简洁，如果您不关心完美验证，请继续。
这取决于你是否相信在你的结构中添加额外的标记比在你的 CSS 中添加两个属性（设计元素应该存在的地方）更简洁和语义化。但是，你是对的，你可以根据你在这方面的立场来争论。