CSS display:inline-block

CSS display:inline-block

在css布局里，我们经常看到代码 「display:inline-block; *display:inline; zoom:1; 」，大多人会说上面的代码只是为了兼容 IE6、7 而已，但是它源于什么呢，为什么这么写呢？

1、display:inline-block;的定义

设置了inline-block属性 后的元素是一个行级的块容器，该元素内部（内容）被格式化成一个块元素，同时元素本身则被格式化成一个行内元素。

直白一点的意思就是：inline-block 的元素既具有 block 元素可以设置宽高等的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align 属性。简而言之：

inline-block 后的元素就是一个格式化为行内元素的块容器( Block container )

2、display:inline-block;的用法

1）inline 元素 display:inline-block

a标签、span标签等行内元素在设置了inline-block属性之后在所有浏览器里的表现是一致的，如下图所示

测试表明：IE6/IE7 中 inline 元素只要触发了hasLayout 其表现就类似于 inline-block，这里设置 display:inline-block; 或者 zoom:1; 等其他属性值可以触发 hasLayout，表现出来是一样的。

2）block 元素 display:inline-block

li等块级元素在设置了inline-block属性之后在浏览器里的表现是不一致的，如下图所示

在现代浏览器里：

在IE6和IE7的表现如下

测试表明：IE6 /IE7中 block 元素即使触发了 hasLayout 也不能具有 inline-block 元素不换行的特性。想要 block 元素支持 inline-block 元素的特性，我们可以这样做：

li{ *display:inline;zoom:1}

首先让 block 元素转化为 inline 元素，强制其不换行；然后通过 zoom:1 触发 hasLayout，使其可以设置宽高。

 

3、兼容各浏览器的总结

综上，现代浏览器都支持 display:inline-block ，IE6、7 inline 元素也可以达到同样的效果，IE6、7 block 元素需要设置 display:inline; zoom:1; 它们结合在一起便是：

display:inline-block;
*display:inline;
*zoom:1;

为了不让支持 CSS2.1 inline-block 的浏览器 重置为 inline，我们针对 IE6、7 做一个 hack。由于现代浏览器也开始支持 zoom 属性，这里只是希望 IE6、7 中生效，所以还是 hack 一下比较合适。至此产生了我们熟悉的兼容各个浏览器的 inline-block 写法。

小结：IE6、7 并不是不支持 inline-block，只是 block 元素需要做一些处理来达到 inline-block 的效果。

原文：http://blog.sina.com.cn/s/blog_51048da7010188h9.html