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

很多時候我們必須使一些塊元素並排顯示，一般想到的是必須使用浮動，但是塊元素浮動給邊距(margin)的時候在IE下會出現加倍的BUG，所以很多時候不得不把這個塊元素套在一個內聯元素裏面，然後給內聯元素浮動和邊距。今天看到了懌飛、秦歌和烏龍茶關於display:inline-block的文章，很不錯，綜合一下，記錄下來。

display:inline-block

簡單來說就是將對象呈遞爲內聯對象，但是對象的內容作爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。但是這個屬性目前不是所有的瀏覽器都支持，只有Opera和Safari支持，FireFox3和IE8據說將會支持，Firefox2和IE使用特殊辦法可以實現這種效果，下面就來探討一下在Firefox2中有-moz-inline-stack和-moz-inline-box實現，但是這兩個私有屬性在某些情況下都會有異常，具體如下：

1、display:-moz-inline-stack

“當它所應用的外包裝器（wrapper）的display爲inline的時候，它所包含的a或button將無法點擊或無法選取，需要通過position:relative還hack掉這個bug”--烏龍茶

2、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效果的兩種方法：

1、先用display:inline-block屬性觸發塊元素，然後再定義display:inline，讓塊元素呈遞爲內聯對象（原理：這是IE的一個經典bug，如果先定義了display:inline-block，然後再設置display回inline或block，layout不會消失），代碼如下：

div {display:inline-block;}

div {display:inline;}

2、直接讓塊元素設置爲內聯對象(display:inline)，然後通過zoom:1觸發塊元素的layout，代碼如下：

div {display:inline; zoom:1;}
那麼爲了能夠讓所有瀏覽器支持display:inline-block，綜合一下，最終的實現代碼如下（參考懌飛：模擬兼容性的 inline-block 屬性）：display:inline-block; display:-moz-inline-stack; zoom:1; *display:inline; text-indent:-9999px;*text-indent:0;font-size:0;line-height:0; overflow:hidden; vertical-align:middle; width:？px; height:？px;