IE7不理解display:inline-block?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (21)

有人可以帮我解决这个问题吗?随着Firefox的工作正常,但与Internet Explorer 7不是。这似乎不明白display: inline-block;

HTML:

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

CSS:

.frame-header {
    height:25px;
    display:inline-block;   
}
提问于
用户回答回答于

IE7 display: inline-block;

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

默认情况下,IE7只支持inline-block自然inline元素(Quirksmode Compatibility Table),所以你只需要对其他元素进行破解。

zoom: 1是否触发hasLayout行为,我们使用属性hack设置displayinline只在IE7和更低(较新的浏览器将不适用)。hasLayoutinline一起将基本触发inline-block行为IE7,所以我们很高兴。

这个CSS不会被验证,并且可以让你的样式表弄糟,所以通过条件注释来使用IE7样式表可能是一个好主意。

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

.frame-header
{
    background:url(images/tab-green.png) repeat-x left top;
    height:25px;
    display:-moz-inline-box;    /* FF2 */
    display:inline-block;   /* will also trigger hasLayout for IE6+7*/
}
/* Hack for IE6 */
* html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
/* Hack for IE7 */
* + html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}

扫码关注云+社区