css dispay:inline-block在不同瀏覽器用法分析

將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。

按照這個解釋：支援的瀏覽器有（ie8,ie9,chrome,firefox3.6+,由於我是用firefox3.6測試的） ，ie6，ie7 是不支援這個屬性的。

ie6,7 如何支援這個屬性呢？

對於區塊層級元素，直接讓區塊層級元素成行內元素， 然後再觸發layout。 {display：inline;zoom:1}，可能有的同學會說，怎麼說ie6,7不支援這個元素呢？

我不是經常在ie6,7的a標籤、span 下使用這個屬性嗎？也起到了作用，這裡理解可能有一個誤區，使用display：inline-block是觸發了layout的原因。

另外一種方式就是先觸發區塊層級元素的layout 屬性，然後再讓他成內嵌元素來展現。比如p元素,可以這樣寫 p{display:inline-block}p{display:inline}

display：inline-block可以用來做什嗎？

可以做的事情很多，可以寫頂部的菜單，可以圖文混排，可以內嵌block元素，也可以至如inline元素中，可以做資訊卡片，如百度空間搭訕有緣人的卡片有緣人紀念日的固定寬度的書寫，當然也可以做布局。 萬變不離其宗，我覺得最本質的就是利用它的使元素為內聯對象，但是內容做塊狀呈遞。這點我們應該牢記。只要理解了它的本質東西，我們才可以以不變應萬變，甚至可以創造自己的東西。

使用它要注意什麼呢？

在使用了display：inline-block的元素之間有分行符號，空格間隙問題。

1.塊狀元素被設定了display：inline-block後，ie6,7沒有空格問題。其他瀏覽器都有。如下圖所示：

在ie8，ie9，firefox可以通過使用font-size:0來解決，但是chrome很悲劇。還是有空白，我使用的是chrome10。不能清除。 可以通過添加letter-spacing屬性

的值來解決，建議作者通過嘗試來解決這個問題。我設定的值是-8px剛才好清除空白。我擔心這會不會有相互覆蓋問題。後來我將值調大到-28px，果然，在chrome中有覆蓋，但是在其他的瀏覽器中沒有。可見解決這個問題以chrome為主。

2.內嵌元素被設定了display：inline-block後，所有的瀏覽器都有換行，空白間隙問題

display:inline-block
將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。但對於這個屬性不是所有瀏覽器都識別。

支援的瀏覽器有：opera、safari.但很遺憾，最流行的ie和firefox卻不支援這個屬性（據說下一版本的firefox將會支援display:inline-block）。不過firefox下卻有私人屬性-moz-inline-box和inline-block形似，為什麼是“形似”而不是“神似”呢？這是因為使用-moz-inline-box會帶來很多意想不到的後遺症，比如使用這一屬性後，text-align有時候就會有問題，還得改用firefox的私人屬性-moz-box-align來解決。

建議：最好不要使用firefox私人屬性-moz-inline-box。
或許有朋友會對上面所說的ie也不支援display:inline-block屬性，表示疑問或者反對。說：“我在ie中對a或者span等內嵌元素使用display:inline-block一直是有效”。

其實不然，在ie中對內嵌元素使用display:inline-block，ie是不識別的，但使用display:inline-block在ie下會觸發layout，從而使內嵌元素擁有了display:inline-block屬性的表症。從上面的這個分析，也不難理解為什麼ie下，對塊元素設定display:inline-block屬性無法實現inline-block的效果。這時塊元素僅僅是被display:inline-block觸發了layout，而它本就是行布局，所以觸發後，塊元素依然還是行布局，而不會如opera中塊元素呈遞為內聯對象。

延伸一個問題：ie下塊元素如何?display:inline-block的效果？

有兩種方法：
1、先使用display:inline-block屬性觸發塊元素，然後再定義display:inline，讓塊元素呈遞為內聯對象（兩個display要先後放在兩個css聲明中才有效果，這是ie的一個經典bug，如果先定義了display:inline-block，然後再將display設回inline或block，layout不會消失）。代碼如下（...為省略的其他屬性內容）：
div {display:inline-block;...}
div {display:inline;}

2、直接讓塊元素設定為內聯對象呈遞（設定屬性display:inline），然後觸發塊元素的layout（如：zoom:1等）。代碼如下：
div {display:inline; zoom:1;...}