摘要：那不是，是我不懂而已。的用途之一西文是以空格來(lái)分隔單詞的，而漢字間則無(wú)需空格分隔，但為了統(tǒng)一西文東亞和的排版，于是抽象出一個(gè)名為的概念用于分隔詞義單元，則作為的值域，而定義域就是語(yǔ)言信息。

每當(dāng)來(lái)個(gè)需要既要水平排版又要設(shè)置固定高寬時(shí)，我就會(huì)想起display:inline-block，還有為了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后發(fā)現(xiàn)盒子間無(wú)端端多了個(gè)不可選的空白符，于是想盡辦法修復(fù)這個(gè)bug。

直到一天拜讀了@一絲姐、@HAX等高人的秘笈后才頓悟，原來(lái)我錯(cuò)了。那不是bug，是我不懂而已。

當(dāng)我們?yōu)橹С諭E5.5/6/7而添加這段hack時(shí)*display:inline;*zoom:1，總以為從IE8開(kāi)始才支持display:inline-block屬性值。其實(shí)從IE5.5開(kāi)始已經(jīng)支持了，只是IE5.5/6/7支持的是IE的自定義標(biāo)準(zhǔn)，而從IE8開(kāi)始則是支持CSS2.1標(biāo)準(zhǔn)而已。

https://msdn.microsoft.com/library/ms530751%28v=vs.85%29.aspx

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.

經(jīng)過(guò)CSS2.1洗禮的我們對(duì)上述內(nèi)容不禁會(huì)發(fā)出兩個(gè)疑問(wèn)：

為啥block-level element設(shè)置了display:inline-block后還是垂直方向排列呢？

為啥inline-level element設(shè)置了display:inline-block后之間沒(méi)有詭異的間隙呢？

還記得楊過(guò)是如何變成神雕大俠的嗎？不就是被斷右臂后發(fā)現(xiàn)左手才是真愛(ài)嗎:)

好了，其實(shí)我的意思是拋棄過(guò)去對(duì)display:inline-block的認(rèn)知，重新來(lái)理解IE5.5/6/7下的它才是硬道理啦。

對(duì)于問(wèn)題1，首先上面的引用很直白地告訴我們——display:inline-block能觸發(fā)hasLayout，然后就沒(méi)了。所以block-level element依然是block-level element，不會(huì)一夜成了inline-level element的。結(jié)論：display:inline-block僅會(huì)觸發(fā)hasLayout，而元素本該怎么排版還是怎么排版。關(guān)于hasLayout的內(nèi)容可參考《CSS魔法堂：hasLayout原來(lái)是這樣!》

對(duì)于問(wèn)題2，我們先看看是否真的沒(méi)有間隙吧！

bk1

見(jiàn)鬼了，在前一個(gè)盒子內(nèi)添加些文本就出現(xiàn)間隙了？其實(shí)這真的和display:inline-block無(wú)關(guān)的，大家就放過(guò)他吧！來(lái)上呈堂證供！

 

before

 

 
before
after


after


after
 
one
 two
one
 
 two
	 

chrome43

對(duì)于起始標(biāo)簽與第一個(gè)non-white-space字符間的white-space字符串，以carriage return( )作為white-space合并單元的起始符，最后保留各合并單元的合并結(jié)果。

結(jié)束標(biāo)簽與最后一個(gè)non-white-space字符間的white-space字符串，以carriage return( )作為white-space合并單元的結(jié)束符，最后保留各合并單元的合并結(jié)果。

詞義單元間的white-space字符串，以carriage return( )作為white-space合并單元的分界符，最后保留各合并單元的合并結(jié)果。

標(biāo)簽內(nèi)僅包含white-space字符串，那么這些white-space字符串將被忽略。

FF5.0

對(duì)于起始標(biāo)簽與第一個(gè)non-white-space字符間和結(jié)束標(biāo)簽與最后一個(gè)non-white-space字符間的white-space字符串將被忽略。

詞義單元間的white-space字符串，以carriage return( )作為white-space合并單元的分界符，最后保留各合并單元的合并結(jié)果。

標(biāo)簽內(nèi)僅包含white-space字符串，那么這些white-space字符串將被忽略。

IE8+

對(duì)于起始標(biāo)簽與第一個(gè)non-white-space字符間和結(jié)束標(biāo)簽與最后一個(gè)non-white-space字符間的white-space字符串將被忽略。

詞義單元間的white-space字符串，合并為1個(gè)(ASCII space)字符。

標(biāo)簽內(nèi)僅包含white-space字符串，那么這些white-space字符串將被忽略。

IE5.5/6/7

對(duì)于起始標(biāo)簽與第一個(gè)non-white-space字符間的white-space字符串將被忽略。

結(jié)束標(biāo)簽與最后一個(gè)non-white-space字符間的white-space字符串，合并為1個(gè)(ASCII space)字符。

詞義單元間的white-space字符串，合并為1個(gè)(ASCII space)字符。

標(biāo)簽內(nèi)僅包含white-space字符串，那么這些white-space字符串將被忽略。

合并單元：合并單元包含0到N個(gè)white-space字符串，最終合并為0到1個(gè)white-space字符

SGML描述B.3.1 Line breaks

specifies that a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag. This applies to all HTML elements without exception.

My favorite Website

My favorite Website

望文生義翻譯法：標(biāo)簽與正文間的line breaks要被忽略掉！也就是上下兩種HTML格式的渲染效果應(yīng)該一致。實(shí)際上除了IE5.5/6/7外其他瀏覽器均遵守之一規(guī)定的。也許你會(huì)說(shuō)上面的實(shí)驗(yàn)不是已經(jīng)證明chrome43不遵守這個(gè)法則嗎？其實(shí)

My favorite Website

HTML格式等價(jià)于#x000A;My favorite Website#x000A;而不是#x000D;#x000A;My favorite Website#x000D;#x000A;。現(xiàn)在大家都清楚了吧:)

繞到這里我想大家都有點(diǎn)暈了，到底這個(gè)跟問(wèn)題2有啥關(guān)系呢？先不要著急嘛，我們先記住兩點(diǎn)：

IE5.5/6/7中"結(jié)束標(biāo)簽與最后一個(gè)non-white-space字符間的white-space字符串，合并為1個(gè)(ASCII space)字符";

IE5.5/6/7中僅字符(串)可以作為詞義單元，而IE8+中inline-level element也作為詞義單元。

bk1

IE5.5/6/7下等價(jià)于

bk1

對(duì)比一下上面的規(guī)則，空隙自然就有了。

IE8+下等價(jià)于

inline-level element整體作為詞義單元，從外部看根本不用管里面具體字符串是什么。

相對(duì)IE自定義的inline-block，CSS2.1引入的inline-block就好理解多了，它做了兩件事：

將元素變性為inline-level element；

讓元素產(chǎn)生新的BFC。

現(xiàn)在我們終于明白通過(guò)display:inline-block進(jìn)行元素的水平排版時(shí)，為啥會(huì)有個(gè)討人厭的跟屁蟲(chóng)了，那剩下的工作當(dāng)然是去而快之啦。首先這個(gè)跟屁蟲(chóng)實(shí)質(zhì)上就是white-space字符串，而我們一般會(huì)輸入的就是ASCII space( )、ASCII tab( )和讓HTML Markup更可讀的line breakscarriage return( )、line feed( )。

那么消滅尾行者的方式就只有兩個(gè)方向：1. 從根本上消除white-space字符串；2. 視覺(jué)效果上消除white-space字符串的影響。

犧牲前

one
two
three

犧牲后1：一行搞定(一大坨代碼，會(huì)斗雞眼的。。。)

onetwothree

犧牲后2：注釋銜接(通過(guò)JS獲取子元素?cái)?shù)會(huì)有問(wèn)題)

onetwothree

犧牲后3

onetwothree

然后@一絲姐說(shuō)為展現(xiàn)效果犧牲結(jié)構(gòu)是耍流氓，@HAX說(shuō)這是"削足適履"。雖說(shuō)這方法從根本上清除了white-space字符串，但那種丑不是一般人能接受的。

這種方式存在兼容性的問(wèn)題，而且子元素需要重新設(shè)置font-size以保證后續(xù)采用em設(shè)置屬性值正確有效這個(gè)就是一個(gè)巨蛋疼的事了。

原理是通過(guò)負(fù)margin-right將white-space字符收入盒子后方，而margin-right的屬性值需要根據(jù)font-size來(lái)決定，必須恰恰等于字形寬度的負(fù)數(shù)，否則會(huì)出現(xiàn)元素重疊的問(wèn)題。(IE5.5/6/7不兼容這玩法)

引入如Jade等HTML模板引擎，開(kāi)發(fā)和維護(hù)時(shí)采用可讀性可維護(hù)性更高的語(yǔ)言，而瀏覽器運(yùn)行時(shí)則采用效率更佳但可讀性差甚至非人類友好的編碼，然后通過(guò)如sourcemap來(lái)做映射。

但若僅僅為解決本文的問(wèn)題而引入HTML模板引擎，是不是小題大造了呢？

既然上述方式皆不爽，而你又熟知float的使用和注意事項(xiàng)，那直接換成float就好了。float的內(nèi)容可參考《CSS魔法堂：說(shuō)說(shuō)Float那個(gè)被埋沒(méi)的志向》

原來(lái)display:inline-block受委屈的這么多年，現(xiàn)在總算沉冤得雪了！都怪CSS2沒(méi)有專門的布局模塊，逼得我們東拼西湊地拼頁(yè)面。所幸的是CSS3專設(shè)了Flexbox/Grid/Multi-columns Layout Modules，我們可以寄望更美好的將來(lái)了！

尊重原創(chuàng)，轉(zhuǎn)載請(qǐng)注明來(lái)自：http://www.cnblogs.com/fsjohnhuang/p/5396037.html^_^肥仔John

inline-block 前世今生
inline-block 未來(lái)
應(yīng)不應(yīng)該使用inline-block代替float
inline-block元素間間隙產(chǎn)生及去除詳解
有哪些好方法能處理 display: inline-block 元素之間出現(xiàn)的空格？
Fighting the Space Between Inline Block Elements
拜拜了,浮動(dòng)布局-基于display:inline-block的列表布局
9.1 White space
9.3.2 Controlling line breaks