让 IE6-7 兼容 CSS 的 inline-block
侧边栏壁纸
  • 累计撰写 170 篇文章
  • 累计收到 176 条评论

让 IE6-7 兼容 CSS 的 inline-block

若海
2011-11-10 / 1 评论 / 12,968 阅读 / 正在检测是否收录...

在IE6、IE7中不识别display:inline-block属性,但使用inline-block属性在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。从上面的分析也不难理解为什么IE6、IE7下对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被inline-block触发了layout,而它本就是行布局,所以触发后,块元素依然是行布局。IE8识别display:inline-block;

在IE6、IE7中实现块元素的inline-block效果有以下两种方法:

1.先使用display:inline-block属性触发layout,然后再定义display:inline让块元素呈现内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典BUG)。

2.直接将块元素设置为display:inline呈现为内联对象,然后触发layout(如zoom:1)。

<html>
<head>
<style type="text/css">
.box{width:100px;height:100px;border:1px solid #FF7900;margin:8px;}
.ib1{display:inline-block;}
.ib1{*display:inline;}
.ib2{display:inline-block;*display:inline;*zoom:1;}
</style>
</head>
<body>
<div class="box ib1">1</div><div class="box ib1">2</div>
<div class="box ib2">3</div><div class="box ib2">4</div>
</body>
</html>
0

评论 (1)

取消
  1. 头像
    Elliptical trainer
    Windows 10 · Google Chrome

    博主很牛x

    回复