IE7不理解display：inline-block [英] IE7 does not understand display: inline-block

问题描述

有人可以帮我找到我的头围绕这个bug吗？与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;   
}

推荐答案

c> display：inline-block; hack如下：

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

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

默认情况下，IE7只支持 inline-block 自然 inline 元素（ Quirksmode兼容性表），所以你只需要这个黑客其他元素。

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 仅在IE7和更低版本中设置显示为 inline 将不适用）。 hasLayout 和 inline 会基本上触发 inline-block 行为在IE7中，所以我们很高兴。

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]–->

这篇关于IE7不理解display：inline-block的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！