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

開篇我們來看幾個問題：

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

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

好了，回到 inline-block 的認知的問題，我的觀點是：

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)出來的特征就是一個獨立的矩形容器，可以設置寬高而且不受外部元素的影響，類似于現(xiàn)代瀏覽器中的 Block formatting contexts （塊級格式化上下文）的概念。

下面來做一個詳細的測試，分別看看 IE6 中 inline 元素和 block 元素的表現(xiàn)：

1）inline 元素 display:inline-block

IE6 中截圖如下：

發(fā)表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發(fā)表