我的收集：（转）display:inline-block

一，内联元素与块级元素

以前我写过一篇文章详细阐述过两者的概念，若是不清楚的同窗情点击块级元素与内联元素.

二，display:inline-block将对象呈递为内联对象，可是对象的内容做为块对象呈递。旁边的内联对象会被呈递在同一行内，容许空格。可是如今的浏览器厂商有一个让人呕吐的行为，就是越有用的东西，他越让你用的不方便，display目前只有safri和chorme可以完美支持，只是ie8和firefox4之后的版本才慢慢支持。下面给你们举例

例子1

html代码：

代码以下	复制代码
<div>1</div> <div>2</div> css代码： div{display:inline-block;width:100px;height:100px;background:#f00;}

这段代码在ie8以上版本显示正常，已经其余的浏览器都是正常的，而惟独在ie67下无效

而后经过css hack进行处理后的css为

代码以下	复制代码
div{display:inline-block;width:100px;height:100px;background:#f00;*display:inline;*zoom:1}

而后获得了预期的效果

例子2

html代码：

代码以下	复制代码
<a>1</a> <a>2</a> css代码： a{display:inline-block;width:100px;height:100px;background:#f00;}

这段代码在全部浏览器下都是正常显示

下面来作一个详细的测试，分别看看 IE6 中 inline 元素和 block 元素的表现：

1）inline 元素 display:inline-block

IE6 中截图以下：

代码以下	复制代码
.dib-inline, .dib-block { width:100px; height:30px; line-height:30px; text-align:center; } .dib-inline { display:inline-block; }

测试代表：IE6 中 inline 元素只要触发了 hasLayout 其表现就相似于 inline-block，这里设置 display:inline-block; 或者 zoom:1; 等其余属性值能够触发 hasLayout ，表现出来是同样的。

 
2）block 元素 display:inline-block

IE6 中截图以下：

代码以下	复制代码
.dib-inline, .dib-block { width:100px; height:30px; line-height:30px; text-align:center; } .dib-block{ display:inline-block; }

测试代表：IE6 中 block 元素即便触发了 hasLayout 也不能具备 inline-block 元素不换行的特性。想要 block 元素支持 inline-block 元素的特性，咱们能够这样作：

代码以下	复制代码
.dib-block { display:inline; zoom:1; }

首先让 block 元素转化为 inline 元素，强制其不换行；而后经过 zoom:1 触发 hasLayout，使其能够设置宽高。修复后的 截图以下：



3）结合现代浏览器

综上，现代浏览器都支持 display:inline-block ，IE六、7 inline 元素也能够达到一样的效果，IE六、7 block 元素须要设置 display:inline; zoom:1; 它们结合在一块儿即是：

代码以下	复制代码
display:inline-block; /* 现代浏览器 +IE六、7 inline 元素 */ *display:inline; /* IE六、7 block 元素 */ *zoom:1;

为了避免让支持 CSS2.1 inline-block 的浏览器 重置为 inline，咱们针对 IE六、7 作一个 hack。因为现代浏览器也开始支持 zoom 属性，这里只是但愿 IE六、7 中生效，因此仍是 hack 一下比较合适。至此产生了咱们熟悉的兼容各个浏览器的 inline-block 写法。

小结：IE六、7 并非不支持 inline-block，只是 block 元素须要作一些处理来达到 inline-block 的效果。

2. 到底什么是 inline-block
说了不少，或许不少朋友还不是太明白到底什么是 inline-block？W3C 在 CSS2.1 The ‘display’ property 中描述以下：

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

大体意思就是：inline-block 后的元素建立了一个行级的块容器，该元素内部（内容）被格式化成一个块元素，同时元素自己则被格式化成一个行内元素。

直白一点的意思就是：inline-block 的元素既具备 block 元素能够设置宽高的特性，同时又具备 inline 元素默认不换行的特性。固然不只仅是这些特性，好比 inline-block 元素也能够设置 vertical-align 属性。简而言之：

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

总结：在ie67下的块元素display:inline-block会失效，须要经过*display:inline;*zoom:1作hack处理