IE6/IE7下_inline-block解决方案

1、inline元素(比如span,em等)的display属性设置为inline-block时,所有的浏览器都支持;
2、block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;
直接贴代码:
[code]<div class=”list”>
<span>无标题文档无标题文档</span>
<span>无标题文档无标题文档</span>
<span>无标题文档无标题文档</span>
<span>无标题文档无标题文档</span>
</div>
<ul class=”list1″>
<li>无标题文档无标题文档</li>
<li>无标题文档无标题文档</li>
<li>无标题文档无标题文档</li>
<li>无标题文档无标题文档</li>
<li>无标题文档无标题文档</li>
</ul>
.list{width:350px; border:1px solid #ccc;}
.list span{display:inline-block;width:150px; margin-left:20px;}
.list1{width:500px;border:1px solid #CCC; margin-top:20px;}
.list1 li{display:inline-block; width:150px; }[/code]

IE6/IE7下:inline-block解决方案
图1(ff/ie8-ie10等浏览器中的效果)

IE6/IE7下:inline-block解决方案
图2(ie6和ie7中的效果)

由上面两个图可以看出,如果是内联元素使用了inline-block,那所有的浏览器显示都是正常的。(ie6、ie7中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表征。)
但是如果是块级元素使用了inline-block,那在ie6和ie7中是有问题的。(ie6/ie7中块元素仅仅是被display:inline-block触发了layout,而它本身就是行布局,所以触发后,块元素依然还是行布局,而不会像火狐等其他浏览器块元素呈递为内联对象。)
那么,ie6/ie7下块元素如何实现display:inline-block的效果?解决方法如下:
让标准浏览器识别display:inline-block;让ie6/7识别 display:inline;来覆盖上面的display:inline-block;然后通过zoom:1;来触发haslayout让inline 元素在ie中表现得和inline-block元素一样。
.list1 li{display:inline-block; width:150px; [color=Red]zoom:1;display:inline;[/color]}
加上[color=Red]zoom:1/color;[color=Red]display:inline/color;
注:一定要加在display:inline-block;后面。

» 本文来自:前端开发者 » 《IE6/IE7下_inline-block解决方案》
» 本文链接地址:https://www.rokub.com/5296.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!