关于ie6块元素行内元素转换

Posted xguoz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于ie6块元素行内元素转换相关的知识,希望对你有一定的参考价值。

1、inline元素的display属性设置为inline-block时,所有的浏览器都支持;
2、block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;

IE6下块元素如何实现display:inline-block的效果?

有两种方法:
1、 先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再 将display设回 inline或block,layout不会消失)。
代码如下(...为省略的其他属性内容):
div {display:inline-block;...}
div {display:inline;}

2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float 属性等)。
代码如下:
div { display:inline-block; _zoom:1;_display:inline;}
div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/









以上是关于关于ie6块元素行内元素转换的主要内容,如果未能解决你的问题,请参考以下文章

关于块级元素和行内元素的总结(面试常考)

HTML行内元素块级元素行内块级元素的特点与区别

块元素与行内元素

块级元素和行内元素及行内块元素(外加转换方式)

块元素与行内元素

前端笔记----类型转换display