如何使'display: inline-block”在 Internet Explorer 6 和 7 中正常工作？

Internet Explorer 6 和 7 中的内联块困境

尽管内联块被广泛接受，但它与 Internet Explorer 的兼容性并不好6 和 7。这个怪癖可能会阻碍您在页面中有效使用内联块的努力

这种行为的原因在于，在 IE6/IE7 中，inline-block 只能在固有的内联元素（例如 span）上正确运行。为了将其范围扩展到 div 等元素，需要一种解决方法。

克服挑战

要使内联块与 div 和其他块级元素一起使用IE6/IE7，使用以下 CSS 片段：

#signup {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

分解解决方案

1. display: inline-block: 声明内联块行为。
2. *display: inline: A " safe”CSS hack，针对 IE7 及更低版本，强制内联
3. zoom: 1: 为块级元素提供“布局”，这对于内联块在 IE6/IE7 中运行至关重要。

其他信息

虽然可以实现有效的 CSS，但应用此解决方法是不切实际的，尤其是在其他地方使用了供应商前缀的属性的情况下。

要更全面地了解 display: inline-block，请参阅相关资源，不包括 -moz-inline-stack，其中仅适用于 Firefox 2。

以上是如何使'display: inline-block”在 Internet Explorer 6 和 7 中正常工作？的详细内容。更多信息请关注PHP中文网其他相关文章！