首页 > 代码库 > display:inline-block在IE6/Ie7和IE8中的区别
display:inline-block在IE6/Ie7和IE8中的区别
在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)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.jinyuanbao.cn"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">body{text-align:center;}.inlineBlock{width:100px;height:100px;border:1px solid #FF7900;margin:8px;display:inline-block;text-align:center;}.inline{*display:inline;}.layout{zoom:1;display:inline-block;}</style></head><body><div class="inlineBlock inline">1</div><div class="inlineBlock inline">2</div><div class="inlineBlock inline">3</div></body></html>
display:inline-block在IE6/Ie7和IE8中的区别
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。