为什么'display: inline-block”在 Internet Explorer 7 中不起作用，如何修复它？

IE7 显示：内联块无能

在 Internet Explorer 7 中遇到显示：内联块问题？你并不孤单。虽然此属性在 Firefox 中完美运行，但 IE7 似乎忽略了它的存在。

问题：

使用提供的 HTML 和 CSS：

<div class="frame-header">
    <h2>...</h2>
</div>

.frame-header {
    height: 25px;
    display: inline-block;
}

IE7 中的“frame-header”元素拒绝充当内联块，从而阻碍了所需的布局

解决方案：

要解决此 IE7 怪癖，请使用以下显示：内联块 hack：

display: inline-block;
*display: inline;
zoom: 1;

说明：

IE7 对以下内容的支持有限inline-block，仅在自然内联元素中识别它。对于此类别之外的元素，例如我们示例中的“frame-header”，黑客步骤如下：

• *display: inline; 强制专门针对 IE7 及更低版本的内联行为。
• zoom: 1; 触发 hasLayout，这是 inline-block 的一个重要属性

注意事项：

此 CSS 不符合验证标准，可能会破坏其他样式。因此，请考虑使用通过条件注释实现的仅 IE7 样式表：

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->

通过合并此目标样式表，您可以解决 IE7 显示：内联块问题，而不会影响整体 CSS 完整性。

以上是为什么'display: inline-block”在 Internet Explorer 7 中不起作用，如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！