曾幾何時，display:inline-block 已經(jīng)深入「大街小巷」，隨處可見 「display:inline-block; *display:inline; *zoom:1; 」這樣的代碼。如今現(xiàn)代瀏覽器已經(jīng)全面支持這個屬性值了，上面的代碼只是為了兼容 IE6、7 而已。那么你真的了解 inline-block 了嗎？本文將帶你深入剖析該屬性值的前世今生，讓你更好的理解和運(yùn)用 inline-block。（本文約定 display:inline-block 簡寫為 inline-block）

開篇我們來看幾個問題：

IE6、7 真的不支持 display:inline-block 嗎？display:inline-block 后的元素為什么會產(chǎn)生水平空隙，這真的是 bug 嗎？如何更好的解決 display:inline-block 元素間產(chǎn)生的水平空隙？一、inline-block 前世1.認(rèn)知

也許有人問你為何要寫「 display:inline-block; *display:inline; *zoom:1; 」 來兼容 IE6、7 時，你會立馬答道：因為 IE6、7 不支持 display:inline-block 唄!不知道何時起，慣性思維給開發(fā)者帶來了這樣一個可怕的概念。萬物都是辯證的，當(dāng)你寫下這些的時候，可曾懷疑過大眾觀點(diǎn)真的可靠嗎？也許你認(rèn)為這些無關(guān) 緊要，實現(xiàn)效果就好。但是如果不能理解每個屬性或?qū)傩灾档母荆銓⒂肋h(yuǎn)無法全面的了解它，人云亦云只會讓你淺嘗輒止，止步不前。那么這里就涉及到所謂的 「CSS 學(xué)習(xí)瓶頸」的問題了，這個問題張鑫旭《說說CSS 學(xué)習(xí)中的瓶頸》一文有詳細(xì)闡述，雖然部分觀點(diǎn)我不是很贊同，但是中心思想還是很值得思考的。文中有幾個不錯的問題這里也列舉出來供大家觀摩：

line-height:150% 和 line-height:1.5 的區(qū)別是？float 為何會讓外部容器高度塌陷？這是 bug？（我的答案在《我們?yōu)楹我宄印罚﹙ertical-align 的表現(xiàn)為何在IE7, IE8, IE9 下表現(xiàn)不盡相同？其中的渲染機(jī)制是？

好了，回到 inline-block 的認(rèn)知的問題，我的觀點(diǎn)是：

IE 從 5.5 開始就已經(jīng)支持 display:inline-block 了，只是支持的并不是那么完善。

在 msdn 微軟開發(fā)者社區(qū)，找到了 IE 從5.5 開始支持 inline-block 的證據(jù)：

The inline-block value is supported starting with Internet Explorer 5.5. You can use this value to give an object a layout without specifying the object’s height or width.

這里明確指出：從 IE5.5 開始支持 inline-block。

鏈接：http://msdn.microsoft.com/zh-cn/library/ie/ms530751(v=vs.85).aspx

那么既然 IE5.5 開始就已經(jīng)支持了 inline-block，為何我們還要寫那么一坨 CSS 呢？同時我們知道 IE6、7 中 display:inline-block 是可以觸發(fā) hasLayout 的，觸發(fā)了 hasLayout的元素表現(xiàn)出來的特征就是一個獨(dú)立的矩形容器，可以設(shè)置寬高而且不受外部元素的影響，類似于現(xiàn)代瀏覽器中的 Block formatting contexts （塊級格式化上下文）的概念。