IE7不理解显示:inline-block

2022-01-30 00:00:00 html css internet-explorer-7

有人可以帮我解决这个错误吗?使用 Firefox 可以正常工作，但使用 Internet Explorer 7 就不行了.display:inline-block;.

Can someone please help me get my head around this bug? With Firefox its working fine but with Internet Explorer 7 its not. It seems not to understand the display: inline-block;.

html:

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

css:

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

推荐答案

IE7 display: inline-block; hack如下:

The IE7 display: inline-block; hack is as follows:

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

默认情况下，IE7 只支持自然 inline 元素上的 inline-block (Quirksmode 兼容性表)，所以你只需要这个 hack 来处理其他元素.

By default, IE7 only supports inline-block on naturally inline elements (Quirksmode Compatibility Table), so you only need this hack for other elements.

zoom: 1 是用来触发 hasLayout 行为，我们使用 star 属性 hack 将 display 设置为 inline 仅在 IE7 及更低版本中(较新的浏览器不适用).hasLayout 和 inline 一起基本会触发 IE7 中的 inline-block 行为，所以我们很高兴.

zoom: 1 is there to trigger hasLayout behaviour, and we use the star property hack for setting the display to inline only in IE7 and lower (newer browsers won't apply that). hasLayout and inline together will basically trigger inline-block behaviour in IE7, so we are happy.

此 CSS 不会验证，并且无论如何都会使您的样式表混乱，因此通过 条件注释使用仅限 IE7 的样式表 可能是个好主意.

This CSS will not validate, and can make your stylesheet messed up anyways, so using an IE7-only stylesheet through conditional comments could be a good idea.

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

相关文章