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

開(kāi)篇我們來(lái)看幾個(gè)問(wèn)題：

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

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

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

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

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

在 msdn 微軟開(kāi)發(fā)者社區(qū)，找到了 IE 從5.5 開(kāi)始支持 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 開(kāi)始支持 inline-block。

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

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

下面來(lái)做一個(gè)詳細(xì)的測(cè)試，分別看看 IE6 中 inline 元素和 block 元素的表現(xiàn)：

1）inline 元素 display:inline-block

IE6 中截圖如下：

測(cè)試表明：IE6 中 inline 元素只要觸發(fā)了 hasLayout 其表現(xiàn)就類似于 inline-block，這里設(shè)置 display:inline-block; 或者 zoom:1; 等其他屬性值可以觸發(fā) hasLayout ，表現(xiàn)出來(lái)是一樣的。

2）block 元素 display:inline-block

IE6 中截圖如下：

測(cè)試表明：IE6 中 block 元素即使觸發(fā)了 hasLayout 也不能具有 inline-block 元素不換行的特性。想要 block 元素支持 inline-block 元素的特性，我們可以這樣做：


首先讓 block 元素轉(zhuǎn)化為 inline 元素，強(qiáng)制其不換行；然后通過(guò) zoom:1 觸發(fā)hasLayout，使其可以設(shè)置寬高。修復(fù)后的 截圖如下：

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

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

為了不讓支持CSS2.1 inline-block 的瀏覽器 重置為 inline，我們針對(duì) IE6、7 做一個(gè) hack。由于現(xiàn)代瀏覽器也開(kāi)始支持 zoom 屬性，這里只是希望 IE6、7 中生效，所以還是 hack 一下比較合適。至此產(chǎn)生了我們熟悉的兼容各個(gè)瀏覽器的 inline-block 寫(xiě)法。

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

2. 到底什么是 inline-block

說(shuō)了很多，或許很多朋友還不是太明白到底什么是 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)建了一個(gè)行級(jí)的塊容器，該元素內(nèi)部（內(nèi)容）被格式化成一個(gè)塊元素，同時(shí)元素本身則被格式化成一個(gè)行內(nèi)元素。

直白一點(diǎn)的意思就是：inline-block 的元素既具有 block 元素可以設(shè)置寬高的特性，同時(shí)又具有 inline 元素默認(rèn)不換行的特性。當(dāng)然不僅僅是這些特性，比如 inline-block 元素也可以設(shè)置 vertical-align 屬性。簡(jiǎn)而言之：

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

怎么樣？聽(tīng)起來(lái)還不錯(cuò)吧！

3. inline-block 緣從何起？

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

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

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

總結(jié)：

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

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

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

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

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

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

IE6、7，IE8（Q）中：inline 元素會(huì)產(chǎn)生空隙，block 元素不會(huì)產(chǎn)生空隙。

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

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

ASCII 空格 ( )ASCII 制表符 (	)ASCII 換頁(yè)符 ()零寬度空格 (​)「這個(gè)在閉合浮動(dòng)中也有運(yùn)用到」

9.3.2 Controlling line breaks 中進(jìn)一步闡述：

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.

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

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

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

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

默認(rèn)值：normal

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

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

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

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

2.去掉 inline-block 產(chǎn)生的空隙

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

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

HTML 中的換行符、空格符、制表符等產(chǎn)生了空白符，而這些歸根結(jié)底都是字符，那么它們的大小都是 受 font-size 來(lái)控制的，字體大小直接導(dǎo)致 inline 或者 inline-block 后元素之間空隙的大小，把 inline-block 元素間的空隙認(rèn)為總是某個(gè)固定大小是錯(cuò)誤的。

用 GIF 動(dòng)畫(huà)的形式來(lái)表明對(duì)應(yīng)關(guān)系：

很清楚的看到，當(dāng) font-size:0 的時(shí)候元素間的空隙都為0了，或許到這里你會(huì)感到很欣喜了，原來(lái)掌握的根本性原因這么簡(jiǎn)單就搞定了啊！

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

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

font-size:0 的支持情況

1）Chrome

低版本的 chrome 瀏覽器為了不讓文字過(guò)小不利于閱讀，默認(rèn)是不支持 font-size:0 的，還好我們有 -webkit-text-size-adjust 這個(gè)私有屬性來(lái)控制，當(dāng)設(shè)為 none 時(shí)就支持字體大小為 0 了。我已經(jīng)記不清楚 chrome 從哪個(gè)版本開(kāi)始支持 font-size:0 了，反正我用 chrome 19 是支持了（有知道的朋友，煩請(qǐng)告訴一絲一聲，最好有官方更新說(shuō)明）。但是，-webkit-text-size-adjust:none; 會(huì)直接導(dǎo)致頁(yè)面文字無(wú)法縮放，這對(duì)于用戶來(lái)說(shuō)顯然是不友好的。所以-webkit-text-size-adjust:none; 一定要慎用，確保使用的地方?jīng)]有大面積的文字。

-webkit-text-size-adjust:none 的使用場(chǎng)景實(shí)例參閱：http://vip.etao.com/

2）Safari

Safari 5 依舊不支持 font-size:0 ，不過(guò)相信這些瀏覽器廠商都意識(shí)到了這個(gè)問(wèn)題，在 Mac 平臺(tái)最新的 Safari 6 已經(jīng)很好的支持 font-size:0 了。

3）Firefox，Opera

經(jīng)測(cè)試，F(xiàn)irefox12，Opera 10 ，這次表現(xiàn)不錯(cuò)，支持 font-size:0 。

4）IE

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

是不是一下子又開(kāi)始頭疼了？沒(méi)關(guān)系，讓我們請(qǐng)出 letter-spacing 和 word-spacing 二位大神。既然空白符也是字符，那么二位大神肯定是可以搞定它們的。

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

normal： 默認(rèn)間隔
length： 用長(zhǎng)度值指定間隔，允許為負(fù)值。

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

第一步：使用 font-size:0經(jīng)測(cè)試發(fā)現(xiàn)，chrome、firefox、IE8+、opera，inline 或 block 元素都沒(méi)有空隙了；
Safari 5.1.7 由于不支持 font-size:0 ，仍然存在空隙；


IE6、7、8（Q），inline 元素 inline-block 后始終存在 1px 左右的空隙。
第二步：處理 Safari 不支持 font-size:0 的問(wèn)題上面已經(jīng)指出 letter-spacing 是支持負(fù)值的，那么這個(gè)負(fù)值到底取多少合適呢？經(jīng)過(guò)測(cè)試得出的結(jié)論是：inline-block 產(chǎn)生的空隙與父級(jí)元素繼承或者設(shè)定的 font-family、font-size 有關(guān)，通常情況下，12px 大小的 tahoma 字體，inline-block 后元素間產(chǎn)生的空隙（間隙）大約是 5px；
各個(gè)字體詳細(xì)情況請(qǐng)參閱《inline-block空隙–letter-spacing與字體大小/字體關(guān)系數(shù)據(jù)表》。Firefox 中 letter-spacing 負(fù)值的絕對(duì)值大于空隙大小后，會(huì)導(dǎo)致元素整體位置向右偏移；
Safari 中 letter-spacing 負(fù)值的絕對(duì)值大于空隙大小后，內(nèi)部會(huì)發(fā)生重疊。

第三步：修復(fù) IE6、7 中始終存在的 1px 空隙
既然 letter-spacing 已經(jīng)無(wú)能為力了，那就試試 word-spacing 吧，直接設(shè)置 word-spacing:-1px。這里需要注意的是，letter-spacing 和 word-spacing 同時(shí)使用可能導(dǎo)致沖突，所以我們需要在 IE6、7 中 hack 掉 letter-spacing。最終代碼如下：

第四步：子元素重置回正常值
上述所有操作都是在父元素設(shè)置的，那么子元素都會(huì)繼承這些屬性，字體大小為0了，子元素就什么都看不到了，這并不是我們想要的。 同時(shí)字符和單詞間距我們也要把它重置為默認(rèn)值?！竑ont-size: 12px; letter-spacing: normal; word-spacing: normal;」最后：inline-block 更好的復(fù)用
或許你會(huì)擔(dān)心每次我都要去看字體和空隙之間大小的關(guān)系嗎？其實(shí)不然，通常情況下，全局字體都已經(jīng)在 body 中指定了，根據(jù)全局字體設(shè)置合適的 letter-spacing 負(fù)值即可。如此一來(lái)，我們便可以放心大膽的使用 inline-block 了，結(jié)合 OOCSS 的思想，可以抽離出兩個(gè)復(fù)用的類，在需要設(shè)置 inline-block 元素的父級(jí)元素上定義一個(gè)「.dib-wrap」，該元素自身定義為「.dib」。這里還有一個(gè)問(wèn)題需要注意的是：由于 inline-block 具有 inline 元素的特性，在垂直方向上很多時(shí)候我們并不希望元素以「vertical-align:baseline」方式來(lái)呈現(xiàn)，所以在「.dib-wrap」中統(tǒng)一重置為「vertical-align:top」即可。3. 去除 inline-block 空隙終極解決方案（2012年8月17日更新）


其實(shí)在 YUI 3 中也全面運(yùn)用了 inline-block 作為基礎(chǔ)布局，YUI 3 是這樣解決的：


顯然，這里純粹使用了 letter-spacing 和 word-spacing 來(lái)控制元素間的空隙，局限性極大，-0.31em 和 -0.43em 只是因?yàn)?YUI 3 全局 cssfonts.css 里設(shè)置是：「body { font:13px/1.231 arial,helvetica,clean,sans-serif; }」。

當(dāng)然，如果你堅(jiān)持使用把 html 寫(xiě)在一行的方式來(lái)達(dá)到去除 inline-block 空隙的目的，我只能說(shuō)：一切以犧牲結(jié)構(gòu)來(lái)兼容表現(xiàn)的行為都是耍流~氓！所以探討此種方式去除空隙也將是無(wú)意義的，不在本文和作者考慮范圍之內(nèi)。

4. 結(jié)局——本文產(chǎn)生的一些觀點(diǎn)如下：IE5.5 后開(kāi)始支持 inline-block， 比 CSS2.1 更早提出 inline-block 的概念并作為所謂的「私有屬性值」使用。但是它所支持的 inline-block 不能等同于 CSS2.1 中的 inline-block，IE 5.5、6、7 、8（Q）中 block 元素對(duì) inline-block 支持不完整，因此二者表現(xiàn)出來(lái)的效果是不完全一致。
產(chǎn)生 inline-block 空隙的根本性原因是：HTML 中的換行符、空格符、制表符等合并為空白符，字體大小不為 0 的情況下，空白符自然占據(jù)一定的寬度，因此產(chǎn)生了元素間的空隙。
慎用 -webkit-text-size-adjust:none，它將會(huì)導(dǎo)致頁(yè)面無(wú)法通過(guò)縮放來(lái)改變字體大小。

三、inline-block 未來(lái)

如今，Mac 平臺(tái)下的 Safari 6 已經(jīng)支持 font-size:0 了，相信很快 Windows 平臺(tái)的 Safari 如果發(fā)布 5.X 的更新，也會(huì)支持字體為 font-size:0 了。等到 IE6、7 滅亡之后，世界就真真兒的美妙了！最后說(shuō)一點(diǎn)：inline-block 與 float 也是無(wú)法直接比較的，請(qǐng)不要再討論 inline-block 和 float 哪個(gè)更好的話題了。inline-block 從 IE5.5 一路走來(lái)，存在即是合理，以后有時(shí)間在總結(jié)一下 inline-block 與 float 的使用場(chǎng)景的區(qū)別。

在不改變 CSS 定位機(jī)制的前提下，inline-block 應(yīng)該是首選，而不是以「奇淫技巧」存在的。有感打油詩(shī)一首：

網(wǎng)事如煙
CSS 紅塵里
inline-block 知多少
你在這頭
inline-block 在那頭
用與不用
它就在那里
不悲不喜

PS：

1. 為了更好的排版，本文使用繁體中文引號(hào) 「」代替簡(jiǎn)體中文小蝌蚪引號(hào)；中英文混排的時(shí)候英文首尾各加一個(gè)空格；以后文章有需要的時(shí)候也都將使用 gif 動(dòng)畫(huà)配合說(shuō)明。

測(cè)試環(huán)境 操作系統(tǒng)版本: Windows 7 企業(yè)版 6.1（內(nèi)部版本 7600） 瀏覽器版本:IE6
IE9
Firefox 14.0.1
Chrome 19.0.1084.46
Safari 5.1.7(7534.57.2)
Opera 12.50 最后更新時(shí)間: 2012-8-22

最新評(píng)論