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 類似*/