inline-block

簡單來說就是在CSS中通過display:inline-block對一個對象指定inline-block屬性,可以將對象呈遞為內聯對象,但是對象的內容作為塊對象呈遞。

基本信息

簡介

在CSS中,塊級對象元素會單獨占一行顯示,多個block元素會各自新起一行,並且可以設定width,height屬性;而內聯對象元素前後不會產生換行,一系列inline元素都在一行內顯示,直到該行排滿,對inline元素設定width,height屬性無效。

我們有個時候既希望元素具有寬度高度特性,又具有同行特性,這個時候我們可以使用inline-block。在CSS中通過display:inline-block對一個對象指定inline-block屬性,簡單來說就是將對象呈現為inline對象,但是對象的內容作為block對象呈現。之後的內聯對象會被排列在同一行內。比如我們可以給一個link(a元素)inline-block屬性值,使其既具有block的寬度高度特性又具有inline的同行特性。

瀏覽器兼容

在css中,inline-block:將對象呈遞為內聯對象,但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內。display:inline-block旁邊的內聯對象會被呈遞在同一行內,允許空格。但是這個屬性目前不是所有的瀏覽器都支持,只有Opera和Safari支持,FireFox3和IE8據說將會支持,Firefox2和IE使用特殊辦法可以實現這種效果,下面就來探討一下

在Firefox2中有-moz-inline-stack和-moz-inline-box實現,但是這兩個私有屬性在某些情況下都會有異常,具體如下:

1、display:-moz-inline-stack

“當它所套用的外包裝器(wrapper)的display為inline的時候,它所包含的a或button將無法點擊或無法選取,需要通過position:relative來hack掉這個bug”

2、display:-moz-inline-box

使用這一屬性後,text-align就會出問題,必須使用Firefox的私有屬性 -moz-box-align來解決

所以,建議不要使用-moz-inline-box,還是使用-moz-inline-stack

在IE(以下IE8除外)下,如果對內聯元素,比如a或span元素,使用inline-block屬性是有效的,似乎IE是支持的,其實是觸發了IE的layout,從而擁有了inline-block屬性的表症。這樣我們就有了一種在IE下實現display:inline-block效果的兩種方法:

1、先用display:inline-block屬性觸發塊元素,然後再定義display:inline,讓塊元素呈遞為內聯對象(原理:這是IE的一個經典bug,如果先定義了display:inline-block,然後再設定display回inline或block,layout不會消失),代碼如下:

div {display:inline-block;}

div {display:inline;}

2、直接讓塊元素設定為內聯對象(display:inline),然後通過zoom:1觸發塊元素的layout,代碼如下:

div {display:inline; zoom:1;}

那么為了能夠讓所有瀏覽器支持display:inline-block,綜合一下,最終的實現代碼如下:

display:inline-block; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持,另一方面下觸發IE下inline 元素的 hasLayout*/

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

zoom:1; /*同樣是IE 下觸發 hasLayout*/

*display:inline; /*一旦IE 下觸發了 hasLayout,設定 block 元素為 inline 會使 display:inline 效果與 display:inline-block 相似*/

/*擴展一下一些其他可能用到的屬性*/

text-indent:-9999px;

*text-indent:0;

font-size:0;

line-height:0; /* 如需隱藏文字,可用這四個屬性 */

/*另外上面隱藏文字,還可以用更簡化的方法:line-height:超級大值;font-size:0; */

overflow:hidden; /* 隱藏溢出的內容 */

vertical-align:middle; /* 行內垂直居中,針對 Opera 比較大的偏離 */

width:?px; /*?為任意非auto值*/

height:?px; /*?為任意非auto值*/

相關詞條

熱門詞條

聯絡我們