CSS深入研究:display的恐怖故事解密(1) – inline-block

display作為一個最為恐怖的屬性，沒有之一，絕對不是欺騙3歲小孩，絕對是真實的。下面，就讓我們看看這貨的恐怖面貌。

display 值：

none ：隱藏對象。(注意，與visibility:hidden不同，這貨是徹底的消失，不保留物理空間。)

inline ：指定對象為內嵌元素。

block ：指定對象為塊元素。

list-item ：指定對象為列表元素。

inline-block ： 指定對象為內聯塊元素。

inline-table ：制定對象為內聯表格。

table ： 指定對象為表格元素 等同<table>

table-caption ：指定對象為表格標題 等同<caption>

table-cell ： 指定對象為儲存格 等同 <td>(好吧，各種等同，我這人比較懶，以下省略各種不必要的文字，大家按照表格對號入座就行)

table-row ：<tr>

table-row-group ：<tbody>

table-column ： <col>

table-column-group ：<colgroup>

table-header-group ： <thead>

table-footer-group ： <tfoot>

campact ：指定對象為塊元素或基於內容之上的內嵌元素。

run-in ：指定對象為塊對象或基於內容之上的內聯對象。

ruby ：指定對象為表格腳註組。

ruby-base ：指定對象為表格腳註組。

ruby-text ：指定對象為表格腳註組。

ruby-base-group ：指定對象為表格腳註組。

ruby-text-group ：指定對象為表格腳註組。

box(flex) ： 指定對象為彈性盒模型。

inline-box ： 指定對象為內聯塊級彈性盒模型。

怎麼樣，頭都暈了，有木有。這麼一堆屬性。碼這麼多字，我乳都酸了。不過別慌，下面讓我來進行大膽的預測一下，當CSS4來的時候會不會某些屬性就嗝屁了呢，我預測表格的一些值會被哢嚓，你要是問我依據，好吧這承認我只是看他們長得難看，所以才這麼說的。然後據說ruby相關的屬性值沒有瀏覽器可以支援，尼瑪呀，坑爹有木有啊。既然這樣，那我們就漸漸得看清楚display這魔鬼有很大一部分是假裝的。經過層層的扒掉這貨的衣服，我們漸漸的看到幾個常用的屬性：

none、inline、block、inline-block。為什麼常用呢？因為這幾個傢伙的相容性是杠杠滴呀。這個時候inline-block微微一笑。我果斷的用福爾摩斯賦予我的雙眼把這貨揪出來讓大家圍觀。

那就讓我們來探索下inline-block之謎。

不知道什麼時候，display：inline-block; 已經深入web各地，[F12]揪出這貨 輕輕的開啟新浪輕部落格(好吧，這是一個免費的廣告)

哇，138個啊，真夠多的。既然這貨這麼拽，那我們就來探個究竟。下面來看一段代碼

{display:inline-block;*display:inline;*zoom:1;}

一段常見的代碼，這裡有幾個疑問：

1.inline-block後的元素會產生空白，這是怎麼回事？

2.IE6、7真的不支援inline-block嗎？

要回答這兩個問題，首先要弄清楚inline-block是什麼。那麼讓我們來查查文檔。

Object is rendered inline,but the contents of the object are rendered as a block element.Adjacent inline elements are rendered on the same line,space permitting.

上段文字出自webplatform，一個年輕的權威網站。如果不夠，還有

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.

這段文字出自W3C。翻譯整理一下：inline-block元素把自己變成特殊的inline元素，對於相鄰的元素來說表現出inline的特點，允許空格。對於內部元素來說表現出block元素的特點，可以設定高度和寬度。

好吧，既然對於相鄰的元素表現的是inline的特點，允許空格，那麼自然在換行的時候產生空白。所以，這是正常的，這是inline-block元素具有inline元素的固有特性，不是所謂的bug。那麼第一個問題就得到解答了。但是，大多數時候，我們不希望看到這空白。於是，網上流傳了很多修複的方法。簡單一點的一般是這樣：

{font-size:0;letter-spacing:-6px;}

在inline-block的外層設定這樣式，來清除間隙，原理是：

1.設定分行符號or定位字元or空格符的字型大小為0，從而使之失去寬度。

2.letter-spacing是一個修複IE6、7下某些元素inline-block後1px間隙的bug和不支援font-size:0;的瀏覽器而存在的。(不同的字型，有不同的寬度，查看細節，請點擊《inline-block空隙–letter-spacing與字型大小/字型關係資料表》)

讓我們來看看這個修複怎麼樣：

我們可以發現在IE6、7下inline元素和inline-block元素始終有1px間隙，safari瀏覽器中元素重疊，並且所有瀏覽器的元素都沒有對齊。看來要好好的調教一下，來看看一絲大神寫的代碼吧：

.dib-wrap {font-size:0;/* 所有瀏覽器 */*word-spacing:-1px;/* IE6、7 */}.dib-wrap .dib{font-size: 12px;letter-spacing: normal;word-spacing: normal;vertical-align:top;}@media screen and (-webkit-min-device-pixel-ratio:0){/* firefox 中 letter-spacing 會導致脫離普通流的元素水平位移 */.dib-wrap{letter-spacing:-5px;/* Safari 等不支援字型大小為 0 的瀏覽器, N 根據父級字型調節*/}}.dib {display: inline-block;*display:inline;*zoom:1;}

等，等燈，等燈^_^：

所有瀏覽器都正常啦，等等，火眼金睛的我突然發現了一個問題：

妖孽，別以為小心翼翼的重疊，我就看不見。以前一般都是和IE6這個魔鬼進行戰鬥，這次居然換著妖孽了。沉思一下先：造成空白間隙的是什麼呢？

哦，是 [分行符號]or[定位字元]or[空格符]。我了個去呀，果斷合并html代碼成一行，調試。哇！合并後正常了。不過這肯定不是童鞋們希望看到的結果，一絲大神說：一切以犧牲結構來相容表現的行為都是耍流氓！那怎麼辦，如果童鞋們要相容safari，又不想根據不同情況修改letter-spacing的話，耍個小流氓，shift+tab，去掉[定位字元]，這樣不管letter-spacing設定多大，都是no problem的啦。也就是讓代碼變成這樣：

少了個縮排，無傷大雅，傷點小雅。

第一個問題回答得我口乾舌燥啊。接下來，讓我們來看看第二個問題，IE6、7支援inline-block嗎？或許這個問題應該換個方式問。IE6、7支援css2.1中所說的inline-block嗎？

答案是不支援，只是表現上的相近。這是通過觸發瀏覽器的haslayout來實現的。那麼就順便提一句：

haslayout是Windows Internet Explorer渲染引擎的一個內部組成部分。在InternetExplorer中，一個元素要麼自己對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。為了調節這兩個不同的概念，渲染引擎採用了 hasLayout 的屬性，屬性值可以為true或false。當一個元素的 hasLayout屬性值為true時，元素就會對自身的內容進行計算大小和組織，而不依賴於父元素。display:inline-block所觸發的hasLayout是無法復原轉的，所以當*display:inline的時候並不會使hasLayout=false。

 

又到了萬惡的結尾，這回上個萬能的，能力有限，兄弟我只能幫你到這了，如果對您有協助，請狠狠的點擊[推薦]or[頂]。