为什么 IE7 会误解'inline-block” CSS 属性，以及如何修复？

IE7 对 inline-block 的误解：故障排除指南

Internet Explorer 7 (IE7) 在 CSS 显示方面提出了独特的挑战特性。其中一个例子是它无法正确解释 inline-block 属性。

有问题的代码

考虑以下 HTML 和 CSS 代码：

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

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

IE7不当行为

由于某种原因，IE7 无法应用内联块样式，导致所需的布局受到损害。

IE7 Hack

为了解决这个问题，需要自定义CSS hack IE7:

.frame-header {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

默认情况下，IE7 仅识别固有内联元素的内联块。这个 hack 规避了这个限制。

• display: inline: 覆盖 display: inline-block，确保与 IE7 的兼容性。
• zoom: 1: 触发 hasLayout 行为，对于实现内联块至关重要
• Star Property Hack：限制显示的应用：内联到 IE7 及更早版本的浏览器。

条件样式表

为了确保最佳性能和验证，建议使用条件样式表来定位特别是 IE7：

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

在“ie7.css”文件中，您可以包含自定义 CSS hack 来解决 IE7 渲染问题。这种方法最大限度地降低了代码复杂性并保持了更高级别的验证。

以上是为什么 IE7 会误解'inline-block” CSS 属性，以及如何修复？的详细内容。更多信息请关注PHP中文网其他相关文章！