很多時候我們必須使一些塊元素并排顯示,一般想到的是必須使用浮動,但是塊元素浮動給邊距(margin)的時候在IE下會出現(xiàn)加倍的BUG,所以很多時候不得不把這個塊元素套在一個內(nèi)聯(lián)元素里面,然后給內(nèi)聯(lián)元素浮動和邊距.今天看到了懌飛、秦歌和烏龍茶關(guān)于display:inline-block的文章,很不錯,綜合一下,記錄下來.
display:inline-block
簡單來說就是將對象呈遞為內(nèi)聯(lián)對象,但是對象的內(nèi)容作為塊對象呈遞.旁邊的內(nèi)聯(lián)對象會被呈遞在同一行內(nèi),允許空格.但是這個屬性目前不是所有的瀏覽器都支持,只有Opera和Safari支持,FireFox3和IE8據(jù)說將會支持,Firefox2和IE使用特殊辦法可以實現(xiàn)這種效果,下面就來探討一下
在Firefox2中有-moz-inline-stack和-moz-inline-box實現(xiàn),但是這兩個私有屬性在某些情況下都會有異常,具體如下：
1、display:-moz-inline-stack
“當(dāng)它所應(yīng)用的外包裝器（wrapper）的display為inline的時候,它所包含的a或button將無法點(diǎn)擊或無法選取,需要通過position:relative還hack掉這個bug”--烏龍茶
2、display:-moz-inline-box
使用這一屬性后,text-align就會出問題,必須使用Firefox的私有屬性 -moz-box-align來解決
所以,建議不要使用-moz-inline-box,還是使用-moz-inline-stack
在IE（以下IE8除外）下,如果對內(nèi)聯(lián)元素,比如a或span元素,使用inline-block屬性是有效的,似乎IE是支持的,其實是觸發(fā)了IE的layout,從而擁有了inline-block屬性的表癥.這樣我們就有了一種在IE下實現(xiàn)display:inline-block效果的兩種方法：
1、先用display:inline-block屬性觸發(fā)塊元素,然后再定義display:inline,讓塊元素呈遞為內(nèi)聯(lián)對象（原理：這是IE的一個經(jīng)典bug,如果先定義了display:inline-block,然后再設(shè)置display回inline或block,layout不會消失）,代碼如下：
div
div
2、直接讓塊元素設(shè)置為內(nèi)聯(lián)對象(display:inline),然后通過zoom:1觸發(fā)塊元素的layout,代碼如下：
div
那么為了能夠讓所有瀏覽器支持display:inline-block,綜合一下,最終的實現(xiàn)代碼如下（參考懌飛：模擬兼容性的 inline-block 屬性）：
display:inline-block; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持,另一方面下觸發(fā)IE下inline 元素的 hasLayout*/
display:-moz-inline-stack; /* Firefox 的私有屬性,需要時還必須用到position:relative解決上面提到的bug */
zoom:1; /*同樣是IE 下觸發(fā) hasLayout*/
*display:inline; /*一旦IE 下觸發(fā)了 hasLayout,設(shè)置 block 元素為 inline 會使 display:inline 效果與 display:inline-block 相似*/
/*擴(kuò)展一下一些其他可能用到的屬性*/
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* 如需隱藏文字,可用這四個屬性 */
/*另外上面隱藏文字,還可以用更簡化的方法：line-height:超級大值;font-size:0; */
overflow:hidden; /* 隱藏溢出的內(nèi)容 */
vertical-align:middle; /* 行內(nèi)垂直居中,針對 Opera 比較大的偏離 */
width:px; /*?為任意非auto值*/
height:px; /*?為任意非auto值*/