css中display:inline-block display:-moz-inline-box display:-moz-inline-stack 的区别

不少时候咱们必须使一些块元素并排显示，通常想到的是必须使用浮动，可是块元素浮动给边距(margin)的
时候在IE下会出现加倍的BUG，因此不少时候不得不把这个块元素套在一个内联元素里面，而后给内联元素

浮动和边距。今天看到这篇文章不错 就COPY 过来 但愿你们作个参考：

display:inline-block
简单来讲就是将对象呈递为内联对象，可是对象的内容做为块对象呈递。旁边的内联对象会被呈递在同一行
内，容许空格。可是这个属性目前不是全部的浏览器都支持，只有Opera和Safari支持，FireFox3和IE8
听说将会支持，Firefox2和IE使用特殊办法能够实现这种效果，下面就来探讨一下

在Firefox2中有-moz-inline-stack和-moz-inline-box实现，可是这两个私有属性在某些状况下都会
有异常，具体以下：
一、display:-moz-inline-stack
“当它所应用的外包装器（wrapper）的display为inline的时候，它所包含的a或button将没法点击或
没法选取，须要经过position:relative还hack掉这个bug”--乌龙茶
二、display:-moz-inline-box
使用这一属性后，text-align就会出问题，必须使用Firefox的私有属性 -moz-box-align来解决
因此，建议不要使用-moz-inline-box，仍是使用-moz-inline-stack

在IE（如下IE8除外）下，若是对内联元素，好比a或span元素，使用inline-block属性是有效的，彷佛
IE是支持的，实际上是触发了IE的layout，从而拥有了inline-block属性的表症。这样咱们就有了一种在
IE下实现display:inline-block效果的两种方法：

一、先用display:inline-block属性触发块元素，而后再定义display:inline，让块元素呈递为内联对
象（原理：这是IE的一个经典bug，若是先定义了display:inline-block，而后再设置display回
inline或block，layout不会消失），代码以下：
div {display:inline-block;}
div {display:inline;}

二、直接让块元素设置为内联对象(display:inline)，而后经过zoom:1触发块元素的layout，代码以下：
div {display:inline; zoom:1;}

那么为了可以让全部浏览器支持display:inline-block，综合一下，最终的实现代码以下（参考怿飞：
模拟兼容性的 inline-block 属性）：

display:inline-block; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持，另外一方面下触
发IE下inline 元素的 hasLayout*/

display:-moz-inline-stack; /* Firefox 的私有属性，须要时还必须用到position:relative解决
上面提到的bug */

zoom:1; /*一样是IE 下触发 hasLayout*/
*display:inline; /*一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline 
效果与 display:inline-block 类似*/