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。



又到了萬惡的結尾，這回上個萬能的，能力有限，兄弟我只能幫你到這了

文章來自：http://www.cnblogs.com/StormSpirit/archive/2012/10/17/2726994.html