display:inline-block用法

很多時(shi)候我(wo)們必(bi)(bi)須(xu)使(shi)一些塊元(yuan)素(su)并排(pai)顯示，一般想(xiang)到(dao)(dao)的是(shi)(shi)必(bi)(bi)須(xu)使(shi)用浮動，但是(shi)(shi)塊元(yuan)素(su)浮動給邊距(ju)(ju)(margin)的時(shi)候在IE下(xia)會(hui)出現加倍的BUG，所以(yi)很多時(shi)候不得不把這(zhe)個(ge)(ge)塊元(yuan)素(su)套在一個(ge)(ge)內(nei)聯(lian)元(yuan)素(su)里面(mian)，然(ran)后給內(nei)聯(lian)元(yuan)素(su)浮動和邊距(ju)(ju)。今天看(kan)到(dao)(dao)這(zhe)篇文章(zhang)不錯(cuo) 就COPY 過來 希望大(da)家做個(ge)(ge)參考：

display:inline-block

簡單來說就(jiu)是(shi)(shi)將(jiang)對象(xiang)呈(cheng)遞為(wei)(wei)內(nei)聯對象(xiang)，但(dan)是(shi)(shi)對象(xiang)的內(nei)容作為(wei)(wei)塊對象(xiang)呈(cheng)遞。旁(pang)邊(bian)的內(nei)聯對象(xiang)會被(bei)呈(cheng)遞在(zai)同一(yi)行(xing)內(nei)，允許空(kong)格。但(dan)是(shi)(shi)這(zhe)個屬性目(mu)前不是(shi)(shi)所有(you)的瀏覽器都支(zhi)持(chi)，只有(you)Opera和(he)(he)Safari支(zhi)持(chi)，FireFox3和(he)(he)IE8據(ju)說將(jiang)會支(zhi)持(chi)，Firefox2和(he)(he)IE使用特殊辦法可以實(shi)現這(zhe)種效果，下面就(jiu)來探討(tao)一(yi)下在(zai)Firefox2中有(you)-moz-inline-stack和(he)(he)-moz-inline-box實(shi)現，但(dan)是(shi)(shi)這(zhe)兩(liang)個私有(you)屬性在(zai)某(mou)些情況下都會有(you)異常，具體(ti)如(ru)下：

1、display:-moz-inline-stack“當(dang)它(ta)所應用(yong)的(de)(de)外(wai)包裝器（wrapper）的(de)(de)display為(wei)inline的(de)(de)時候(hou)，它(ta)所包含的(de)(de)a或(huo)button將無法(fa)點擊(ji)或(huo)無法(fa)選(xuan)取，需(xu)要通(tong)過position:relative還hack掉這(zhe)個(ge)bug”–烏龍茶

2、display:-moz-inline-box使用這一屬(shu)性(xing)后(hou)，text-align就會出問題，必須使用Firefox的(de)(de)私有(you)屬(shu)性(xing) -moz-box-align來解決(jue)所以，建議不要(yao)使用-moz-inline-box，還是(shi)使用-moz-inline-stack在IE（以下IE8除外）下，如果對內(nei)聯元(yuan)素，比如a或span元(yuan)素，使用inline-block屬(shu)性(xing)是(shi)有(you)效的(de)(de)，似乎IE是(shi)支持的(de)(de)，其實(shi)是(shi)觸發(fa)了IE的(de)(de)layout，從(cong)而擁(yong)有(you)了inline-block屬(shu)性(xing)的(de)(de)表癥。

這樣(yang)我們(men)就有了一(yi)種(zhong)在IE下實(shi)現display:inline-block效(xiao)果的(de)兩種(zhong)方法(fa)：

1、先用display:inline-block屬性觸發塊元素，然后(hou)再(zai)定義display:inline，讓塊元素呈遞為內聯(lian)對象（原理：這是IE的一(yi)個經典bug，如果先定義了display:inline-block，然后(hou)再(zai)設置display回inline或(huo)block，layout不(bu)會消(xiao)失），代碼(ma)如下：div {display:inline-block;}div {display:inline;}

2、直接讓塊(kuai)元素設置(zhi)為內聯對象(display:inline)，然后通過zoom:1觸發塊(kuai)元素的layout，代碼如下：div {display:inline; zoom:1;}那么為了能夠(gou)讓所(suo)有瀏覽器支持(chi)display:inline-block，

綜合一下，最終的(de)實現代碼(ma)如下：

display:inline-block; /*一(yi)方(fang)面Firefox3 beta、IE8 beta、Opera、Safari 支持，另(ling)一(yi)方(fang)面下觸(chu)發IE下inline 元素的 hasLayout*/

display:-moz-inline-stack; /* Firefox 的私有屬性，需要時還必須用(yong)到(dao)position:relative解決上面提到(dao)的bug */

zoom:1; /*同樣是(shi)IE 下觸(chu)發 hasLayout*/

*display:inline; /*一旦(dan)IE 下(xia)觸發(fa)了 hasLayout，設置(zhi) block 元素(su)為 inline 會使 display:inline 效果與 display:inline-block 相似*/