CSS:IE6/Ie7 display:inline-block 不起作用

心已赠人 2022-05-10 10:48 411阅读 0赞

在 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;

IE下块元素如何实现 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 等）。代码如下：  
div \{display:inline; zoom:1;...\}

如果是内联元素使用了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; **\*zoom:1;\*display:inline;**\}  
加上**\*zoom:1**(触发ie6和ie7下的haslayout)**;\*display:inline**(只有ie6和ie7识别)**;**  
**注：一定要加在****display:inline-block;后面。**

**转载地址：**[https://www.cnblogs.com/christal/p/3892295.html][https_www.cnblogs.com_christal_p_3892295.html]

[https_www.cnblogs.com_christal_p_3892295.html]: https://www.cnblogs.com/christal/p/3892295.html