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

crystyleEye 2013-07-02

展開全文

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

display 值：

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

inline ：指定對(duì)象為內(nèi)聯(lián)元素,。

block ：指定對(duì)象為塊元素。

list-item ：指定對(duì)象為列表元素,。

inline-block ：指定對(duì)象為內(nèi)聯(lián)塊元素,。

inline-table ：制定對(duì)象為內(nèi)聯(lián)表格,。

table ：指定對(duì)象為表格元素等同<table>

table-caption ：指定對(duì)象為表格標(biāo)題等同<caption>

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

table-row ：<tr>

table-row-group ：<tbody>

table-column ： <col>

table-column-group ：<colgroup>

table-header-group ： <thead>

table-footer-group ： <tfoot>

campact ：指定對(duì)象為塊元素或基于內(nèi)容之上的內(nèi)聯(lián)元素。

run-in ：指定對(duì)象為塊對(duì)象或基于內(nèi)容之上的內(nèi)聯(lián)對(duì)象,。

ruby ：指定對(duì)象為表格腳注組,。

ruby-base ：指定對(duì)象為表格腳注組。

ruby-text ：指定對(duì)象為表格腳注組,。

ruby-base-group ：指定對(duì)象為表格腳注組,。

ruby-text-group ：指定對(duì)象為表格腳注組。

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

inline-box ：指定對(duì)象為內(nèi)聯(lián)塊級(jí)彈性盒模型,。

怎么樣，頭都暈了,，有木有,。這么一堆屬性，碼這么多字。不過別慌,，下面讓我來進(jìn)行大膽的預(yù)測(cè)一下,，當(dāng)CSS4來的時(shí)候會(huì)不會(huì)某些屬性就沒了呢，我預(yù)測(cè)表格的一些值會(huì)被咔嚓,，你要是問我依據(jù),，好吧這承認(rèn)我只是看他們長得難看，所以才這么說的,。然后據(jù)說ruby相關(guān)的屬性值沒有瀏覽器可以支持,，尼瑪呀，坑爹有木有啊,。既然這樣,，那我們就漸漸得看清楚display這魔鬼有很大一部分是假裝的。經(jīng)過層層的扒掉這貨的衣服,，我們漸漸的看到幾個(gè)常用的屬性：

none,、inline、block,、inline-block,。為什么常用呢？因?yàn)檫@幾個(gè)家伙的兼容性是杠杠滴呀,。這個(gè)時(shí)候inline-block微微一笑,。我果斷的用福爾摩斯賦予我的雙眼把這貨揪出來讓大家圍觀。

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

不知道什么時(shí)候,，display：inline-block; 已經(jīng)深入web各地，[F12]揪出這貨輕輕的打開新浪輕博客(好吧,，這是一個(gè)免費(fèi)的廣告)

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

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

一段常見的代碼,，這里有幾個(gè)疑問：

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

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

要回答這兩個(gè)問題，首先要弄清楚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,，一個(gè)年輕的權(quán)威網(wǎng)站。如果不夠,，還有

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元素，對(duì)于相鄰的元素來說表現(xiàn)出inline的特點(diǎn),，允許空格,。對(duì)于內(nèi)部元素來說表現(xiàn)出block元素的特點(diǎn)，可以設(shè)置高度和寬度,。

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

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

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

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ù)表》)

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

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

.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è)問題：

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

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

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

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

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

haslayout是Windows Internet Explorer渲染引擎的一個(gè)內(nèi)部組成部分。在InternetExplorer中,，一個(gè)元素要么自己對(duì)自身的內(nèi)容進(jìn)行計(jì)算大小和組織,，要么依賴于父元素來計(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

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào),。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： crystyleEye > 《div css;table》

舉報(bào)/認(rèn)領(lǐng)