CSS深入研究:display的恐怖故事解密(1)
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;的瀏覽器而存在的。(不同的字體，有不同的寬度，查看細節(jié)，請點擊《inline-block空隙–letter-spacing與字體大小/字體關系數據表》)
讓我們來看看這個修復怎么樣：
從圖中我們可以發(fā)現在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 根據父級字體調節(jié)*/
- }
- }
- .dib {
- display: inline-block;
- *display:inline;
- *zoom:1;
- }
等，等燈，等燈^_^：
所有瀏覽器都正常啦，等等，火眼金睛的我突然發(fā)現了一個問題：
妖孽，別以為小心翼翼的重疊，我就看不見。以前一般都是和IE6這個魔鬼進行戰(zhàn)斗，這次居然換著妖孽了。沉思一下先：造成空白間隙的是什么呢？
哦，是 [換行符]or[制表符]or[空格符]。我了個去呀，果斷合并html代碼成一行，調試。哇！合并后正常了。不過這肯定不是童鞋們希望看到的結果，一絲大神說：一切以犧牲結構來兼容表現的行為都是耍流氓！那怎么辦，如果童鞋們要兼容safari，又不想根據不同情況修改letter-spacing的話，耍個小流氓，shift+tab，去掉[制表符]，這樣不管letter-spacing設置多大，都是no problem的啦。也就是讓代碼變成這樣：
少了個縮進，無傷大雅，傷點小雅。
***個問題回答得我口干舌燥啊。接下來，讓我們來看看第二個問題，IE6、7支持inline-block嗎？或許這個問題應該換個方式問。IE6、7支持css2.1中所說的inline-block嗎？
答案是不支持，只是表現上的相近。這是通過觸發(fā)瀏覽器的haslayout來實現的。那么就順便提一句：dfdaf
haslayout是Windows Internet Explorer渲染引擎的一個內部組成部分。在InternetExplorer中，一個元素要么自己對自身的內容進行計算大小和組織，要么依賴于父元素來計算尺寸和組織內容。為了調節(jié)這兩個不同的概念，渲染引擎采用了 hasLayout 的屬性，屬性值可以為true或false。當一個元素的 hasLayout屬性值為true時，元素就會對自身的內容進行計算大小和組織，而不依賴于父元素。display:inline-block所觸發(fā)的hasLayout是不可逆轉的，所以當*display:inline的時候并不會使hasLayout=false。
原文鏈接：http://www.cnblogs.com/StormSpirit/archive/2012/10/17/2726994.html
【編輯推薦】
