寫在前面的話，在我開發(fā)CSS的過程中，我發(fā)現很多詭異的問題都是對概念理解有偏差，所以在每篇開始的時候，我都把W3c的解釋拿出來曬曬。個人經驗，很多的問題看看W3C一般都能夠解決，W3C是最好的參考書。

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

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

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

對于塊級元素，直接讓塊級元素成行內元素， 然后再觸發(fā)layout。 {display：inline;zoom:1}，可能有的同學會說，怎么說ie6,7不支持這個元素呢？

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

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

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

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

使用它要注意什么呢？

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

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

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

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

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

如下圖所示：

 所有瀏覽器，ie6,7,8,9 chrome，firefox都有空白，

怎么解決呢。直接在包含的元素上添加letter-spacing:-8px; 即可。

最后附上我研究的代碼：

• 瀏覽器