display作為一個(gè)最為恐怖的屬性，沒(méi)有之一，絕對(duì)不是欺騙3歲小孩，絕對(duì)是真實(shí)的。下面，就讓我們看看這貨的恐怖面貌。

display 值：

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

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

1.inline-block后的元素會(huì)產(chǎn)生空白，這是怎么回事？

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

要回答這兩個(gè)問(wèn)題，首先要弄清楚inline-block是什么。那么讓我們來(lái)查查文檔。

上段文字出自webplatform，一個(gè)年輕的權(quán)威網(wǎng)站。如果不夠，還有

這段文字出自W3C。翻譯整理一下：inline-block元素把自己變成特殊的inline元素，對(duì)于相鄰的元素來(lái)說(shuō)表現(xiàn)出inline的特點(diǎn)，允許空格。對(duì)于內(nèi)部元素來(lái)說(shuō)表現(xiàn)出block元素的特點(diǎn)，可以設(shè)置高度和寬度。

好吧，既然對(duì)于相鄰的元素表現(xiàn)的是inline的特點(diǎn)，允許空格，那么自然在換行的時(shí)候產(chǎn)生空白。所以，這是正常的，這是inline-block元素具有inline元素的固有特性，不是所謂的bug。那么***個(gè)問(wèn)題就得到解答了。但是，大多數(shù)時(shí)候，我們不希望看到這空白。于是，網(wǎng)上流傳了很多修復(fù)的方法。簡(jiǎn)單一點(diǎn)的一般是這樣：

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

在inline-block的外層設(shè)置這樣式，來(lái)清除間隙，原理是：

1.設(shè)置換行符or制表符or空格符的字體大小為0，從而使之失去寬度。

2.letter-spacing是一個(gè)修復(fù)IE6、7下某些元素inline-block后1px間隙的bug和不支持font-size:0;的瀏覽器而存在的。(不同的字體，有不同的寬度，查看細(xì)節(jié)，請(qǐng)點(diǎn)擊《inline-block空隙–letter-spacing與字體大小/字體關(guān)系數(shù)據(jù)表》)

讓我們來(lái)看看這個(gè)修復(fù)怎么樣：

從圖中我們可以發(fā)現(xiàn)在IE6、7下inline元素和inline-block元素始終有1px間隙，safari瀏覽器中元素重疊，并且所有瀏覽器的元素都沒(méi)有對(duì)齊。看來(lái)要好好的調(diào)教一下，來(lái)看看一絲大神寫的代碼吧：

.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 會(huì)導(dǎo)致脫離普通流的元素水平位移 */ 
.dib-wrap{  
letter-spacing:-5px;/* Safari 等不支持字體大小為 0 的瀏覽器, N 根據(jù)父級(jí)字體調(diào)節(jié)*/ 
}  
}  
.dib {  
display: inline-block;  
*display:inline;  
*zoom:1;  
} 

等，等燈，等燈^_^：

所有瀏覽器都正常啦，等等，火眼金睛的我突然發(fā)現(xiàn)了一個(gè)問(wèn)題：

妖孽，別以為小心翼翼的重疊，我就看不見(jiàn)。以前一般都是和IE6這個(gè)魔鬼進(jìn)行戰(zhàn)斗，這次居然換著妖孽了。沉思一下先：造成空白間隙的是什么呢？

哦，是 [換行符]or[制表符]or[空格符]。我了個(gè)去呀，果斷合并html代碼成一行，調(diào)試。哇！合并后正常了。不過(guò)這肯定不是童鞋們希望看到的結(jié)果，一絲大神說(shuō)：一切以犧牲結(jié)構(gòu)來(lái)兼容表現(xiàn)的行為都是耍流氓！那怎么辦，如果童鞋們要兼容safari，又不想根據(jù)不同情況修改letter-spacing的話，耍個(gè)小流氓，shift+tab，去掉[制表符]，這樣不管letter-spacing設(shè)置多大，都是no problem的啦。也就是讓代碼變成這樣：

少了個(gè)縮進(jìn)，無(wú)傷大雅，傷點(diǎn)小雅。

***個(gè)問(wèn)題回答得我口干舌燥啊。接下來(lái)，讓我們來(lái)看看第二個(gè)問(wèn)題，IE6、7支持inline-block嗎？或許這個(gè)問(wèn)題應(yīng)該換個(gè)方式問(wèn)。IE6、7支持css2.1中所說(shuō)的inline-block嗎？

答案是不支持，只是表現(xiàn)上的相近。這是通過(guò)觸發(fā)瀏覽器的haslayout來(lái)實(shí)現(xiàn)的。那么就順便提一句：dfdaf

haslayout是Windows Internet Explorer渲染引擎的一個(gè)內(nèi)部組成部分。在InternetExplorer中，一個(gè)元素要么自己對(duì)自身的內(nèi)容進(jìn)行計(jì)算大小和組織，要么依賴于父元素來(lái)計(jì)算尺寸和組織內(nèi)容。為了調(diào)節(jié)這兩個(gè)不同的概念，渲染引擎采用了 hasLayout 的屬性，屬性值可以為true或false。當(dāng)一個(gè)元素的 hasLayout屬性值為true時(shí)，元素就會(huì)對(duì)自身的內(nèi)容進(jìn)行計(jì)算大小和組織，而不依賴于父元素。display:inline-block所觸發(fā)的hasLayout是不可逆轉(zhuǎn)的，所以當(dāng)*display:inline的時(shí)候并不會(huì)使hasLayout=false。

原文鏈接：http://www.cnblogs.com/StormSpirit/archive/2012/10/17/2726994.html

【編輯推薦】

1. 創(chuàng)建CSS3漂亮的動(dòng)畫菜單
2. 愛(ài)上樸實(shí)的CSS細(xì)節(jié)
3. 如何進(jìn)行CSS代碼減肥提升前端性能
4. 網(wǎng)頁(yè)設(shè)計(jì)中重要并且簡(jiǎn)單易用的CSS
5. CSS盒子模型小剖析