IE6兼容inline-block的方法

最新推荐文章于 2024-07-11 16:41:50 发布

weixin_33972649

最新推荐文章于 2024-07-11 16:41:50 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/good10001/p/4741574.html

本文探讨了Internet Explorer浏览器中实现display:inline-block效果的方法。详细解释了为何IE中使用此属性不能直接作用于块级元素，并提供了两种实现技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

或许有朋友会对IE不支持 display:inline-block 属性，表示疑问或者反对。说：“我在 IE 中对 a 或者 span 等内联元素使用 display:inline-block 一直是有效的”。

其实不然，在IE中对内联元素使用 display:inline-block，IE 是不识别的，但使用 display:inline-block 在 IE 下会触发 layout，从而使内联元素拥有了display:inline-block 属性的表症。从上面的这个分析，也不难理解为什么 IE 下，对块元素设置 display:inline-block 属性无法实现 inline-block 的效果。这时块元素仅仅是被 display:inline-block 触发了 layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如 Opera 中块元素呈递为内联对象。

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;...}

转载于:https://www.cnblogs.com/good10001/p/4741574.html