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

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

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

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 開始就已經支持了 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 中截圖如下：

2）block 元素 display:inline-block

IE6 中截圖如下：

3）結合現(xiàn)代瀏覽器

綜上，現(xiàn)代瀏覽器都支持 display:inline-block ，IE6、7 inline 元素也可以達到同樣的效果，IE6、7 block 元素需要設置 display:inline; zoom:1; 它們結合在一起便是：

小結：IE6、7 并不是不支持 inline-block，只是 block 元素需要做一些處理來達到 inline-block 的效果。

2. 到底什么是 inline-block

說了很多，或許很多朋友還不是太明白到底什么是 inline-block？W3C 在 CSS2.1 The ‘display’ property 中描述如下：

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

大致意思就是：inline-block 后的元素創(chuàng)建了一個行級的塊容器，該元素內部（內容）被格式化成一個塊元素，同時元素本身則被格式化成一個行內元素。

直白一點的意思就是：inline-block 的元素既具有 block 元素可以設置寬高的特性，同時又具有 inline 元素默認不換行的特性。當然不僅僅是這些特性，比如 inline-block 元素也可以設置 vertical-align 屬性。簡而言之：

inline-block 后的元素就是一個格式化為行內元素的塊容器( Block container )

怎么樣？聽起來還不錯吧！

3. inline-block 緣從何起？

前面已經證明了 IE 5.5 開始就支持了 inline-block，那么 IE5.5 是什么時候發(fā)布的呢？話說當年網景與 IE 大戰(zhàn)，IE5.5 那是何等的厲害……（好吧，此處略去十頁）。從維基百科的資料來看，IE5.5 beta1 的發(fā)布時間是：1999年12月，最終版本是 2000年7月。那么 W3C 標準中是何時才出現(xiàn) inline-block 這個值的呢？

在 CSS1 規(guī)范中，「display」的值僅包括： block | inline | list-item | none 。CSS2.1中才添加了 inline-block 屬性值?？啾频挠⒄Z水平終于翻到了這份草案：http://www.w3.org/TR/2002/WD-CSS21-20020802/visuren.html#display-prop， 這份草案的日期是 2002年8月2日，納尼?。?！原來我們糾結了半天的 inline-block ， IE5.5 至少提前兩年就提出來了??！難道是微軟給 W3C 提議后，CSS 2.1才加入的？（不過我看到 W3C 官網有一個關于是否增加 inline-block 的投票）好吧這個問題也許有一天 IE 某個開發(fā)者寫《 IE回憶錄》的時候我們才能了解到其中的內幕。如果找到更早關于 inline-block 的 CSS草案，也麻煩告知一絲一聲。好吧，如果你還不相信，打微軟官方電話問問吧 800-820-3800（不是 DHC 哦?。?。

原來我們一直討論的 inline-block 在 IE 6、7中和 CSS2.1 中的（現(xiàn)代瀏覽器所支持的） inline-block 上壓根不是一個東東嘛，IE6、7 中的 inline-block 更像是 IE 的私有屬性值，他們本身就不具有可比性。簡單、絕對的認為 IE6、7 不支持 inline-block 好比一葉障目，看到前面，卻看不到后面，太過于片面。誠然，IE6、7 的 hasLayout 給我們帶來了很多麻煩，但是不得不承認微軟的 IE 在網頁多語言文本混排上的先進性，尤其是 CJK 文字和西文的混排，超越其他瀏覽器至少5年。

總結：

IE5.5 后開始支持 inline-block， 但是它所支持的 inline-block 不能等同于 CSS2.1 中的 inline-block，因為 IE5.5 比 CSS2.1 更早提出 inline-block 的概念并作為所謂的「私有屬性值」使用，所以二者表現(xiàn)出來的效果是不完全一致。IE 5.5、6、7 、8（Q）中 block 元素對 inline-block 支持不完整，如果要達到類似的效果，需要先設置為 display:inline，然后使用 zoom:1 等觸發(fā)hasLayout。IE 5.5、6、7 、8（Q）中 inline 元素欲達到 inline-block 的效果只需直接設置此屬性值或使用 zoom:1 等均可。

《各瀏覽器對 ‘display’ 特性值的支持程度不同》

二、inline-block 今生1. display:inline-block 后的元素為什么會產生水平空隙，這真的是 bug 嗎？

這么一個神奇的屬性，為何大家一直避而遠之呢？這恐怕還得從 inline-block 元素之間產生的水平空隙（間隙）說起吧。

現(xiàn)代瀏覽器中 inline 和 block 元素 display:inline-block 后均會產生水平空隙；

IE6、7，IE8（Q）模擬 display:inline-block 后分兩種情況：

IE6、7，IE8（Q）中：inline 元素會產生空隙，block 元素不會產生空隙。

看看 inline 元素默認的表現(xiàn)情況如何？原來默認就有空隙存在！它們是誰？是空白符（white space）！

W3C 9.1 White space 中規(guī)定以下元素屬于空白符（white space）：

ASCII 空格 ( )ASCII 制表符 (	)ASCII 換頁符 ()零寬度空格 (​)「這個在閉合浮動中也有運用到」

9.3.2 Controlling line breaks 中進一步闡述：

A line break is defined to be a carriage return (
), a line feed (
), or a carriage return/line feed pair. All line breaks constitutewhite space.

For more information about SGML’s specification of line breaks, please consult the notes on line breaks in the appendix.

折行被定義為一個回車符（
），一個換行符 line feed (
)，或者一個回車、換行的組合。所有的折行構成了空白符。

有關 SGML 規(guī)范中折行的更多信息，請參閱附錄中關于折行的注釋。

通常情況下，對于多個連續(xù)的空白符（空格，換行符，回車符等），瀏覽器會將他們合并為一個空白符。CSS 中由 white-space 這個屬性來控制：

white-space：normal | pre | nowrap | pre-wrap | pre-line

默認值：normal

normal：默認處理方式。pre：用等寬字體顯示預先格式化的文本，不合并文字間的空白距離，當文字超出邊界時不換行?？刹殚?pre 對象nowrap：強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象。pre-wrap：用等寬字體顯示預先格式化的文本，不合并文字間的空白距離，當文字碰到邊界時發(fā)生換行。pre-line：保持文本的換行，不保留文字間的空白距離，當文字碰到邊界時發(fā)生換行。

注：IE7及更早瀏覽器不支持 CSS2.1 新增的 pre-wrap | pre-line。

所以這并不是 inline-block 后產生的 bug，而是因為 inline-block 具有 inline 元素固有的特性。那么為何 IE6、7 block 元素沒有產生空隙呢？其實前面也提到了 IE 的hasLayout，具有獨立性，所以產生 hasLayout 的元素之間表現(xiàn)出來互不影響，這也再次表明 IE6、7 中的 inline-block 不能等同于 CSS2.1 中的 inline-block。如果非要說是有 bug， IE6、7 block 元素 inline-block 后不產生空隙才是 bug。

測試表明刪除換行符后，inline 元素間的空隙就「消失」了：

2.去掉 inline-block 產生的空隙

為了讓各個瀏覽器表現(xiàn)一致，更好的還原視覺設計搞，很多時候我們需要去掉 inline-block 產生的空隙。

上一節(jié)中我們已經知道產生空隙的根本性原因是：

HTML 中的換行符、空格符、制表符等產生了空白符，而這些歸根結底都是字符，那么它們的大小都是 受 font-size 來控制的，字體大小直接導致 inline 或者 inline-block 后元素之間空隙的大小，把 inline-block 元素間的空隙認為總是某個固定大小是錯誤的。

用 GIF 動畫的形式來表明對應關系：

很清楚的看到，當 font-size:0 的時候元素間的空隙都為0了，或許到這里你會感到很欣喜了，原來掌握的根本性原因這么簡單就搞定了??！

然，理想是豐滿的，現(xiàn)實是骨感的。

大部分瀏覽器是支持 font-size:0 的。很明顯，我們要和 IE 6、7 這兩個妖孽進行一番戰(zhàn)斗。

font-size:0 的支持情況

1）Chrome

低版本的 chrome 瀏覽器為了不讓文字過小不利于閱讀，默認是不支持 font-size:0 的，還好我們有 -webkit-text-size-adjust 這個私有屬性來控制，當設為 none 時就支持字體大小為 0 了。我已經記不清楚 chrome 從哪個版本開始支持 font-size:0 了，反正我用 chrome 19 是支持了（有知道的朋友，煩請告訴一絲一聲，最好有官方更新說明）。但是，-webkit-text-size-adjust:none; 會直接導致頁面文字無法縮放，這對于用戶來說顯然是不友好的。所以-webkit-text-size-adjust:none; 一定要慎用，確保使用的地方沒有大面積的文字。

-webkit-text-size-adjust:none 的使用場景實例參閱：http://vip.etao.com/

2）Safari

Safari 5 依舊不支持 font-size:0 ，不過相信這些瀏覽器廠商都意識到了這個問題，在 Mac 平臺最新的 Safari 6 已經很好的支持 font-size:0 了。

3）Firefox，Opera

經測試，F(xiàn)irefox12，Opera 10 ，這次表現(xiàn)不錯，支持 font-size:0 。

4）IE

IE8 以上支持 font-size:0;IE6、7 inline 元素 inline-block 后設置 font-size:0 始終有 1px 的空隙。

是不是一下子又開始頭疼了？沒關系，讓我們請出 letter-spacing 和 word-spacing 二位大神。既然空白符也是字符，那么二位大神肯定是可以搞定它們的。

letter-spacing : normal | length （檢索或設置對象中的文字之間的間隔）word-spacing : normal | length（檢索或設置對象中的單詞之間插入的空隔）

normal： 默認間隔
length： 用長度值指定間隔，允許為負值。

還等什么，我們趕緊試試吧：