inline-block兼容低版本IE浏览器~~在IE6/Ie7和IE8中

时光毁灭记忆、已成空白 提交于 2019-12-02 17:03:44
在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)。

注意:inline-block和inline设置的类名必须是不一样的。而且必须先设置inline-block再设置inline

<div class="mail inline"></div>

.mail{

display:inline-block;

}

.inline{ display:inline; }

 或者

mail{

zoom:1;/* 触发元素的haslayout属性 */     display:inline-block;/* 非IE6、7浏览器识别该属性,使得页面也成行块布局 */     *display:inline;/* 针对IE6、7定义 display:inline,让块元素呈递为内联对象,并具有display:inline-block属性的表症 */

}

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!