CSS中的display:inline-block

文章目錄

• 1、display:inline-block
• 2、IE中的inline-block
• 3、其它瀏覽器
• 4、參考文獻
• 1、display:inline-block
• 2、IE中的inline-block
• 3、其它瀏覽器
• 4、參考文獻

1、display:inline-block

讓一個元素具有“區塊元素”的屬性（可以設定width和height），又具有“內嵌元素”的屬性（不產生換行）。

2、IE中的inline-block

IE6不支援這個屬性，但IE8開始支援這個屬性。

讓IE6內嵌元素具備inline-block特性

由於inline-block會觸發IE的layout，所以IE6中只要設定{display:inline-block;}即可。

讓IE6區塊元素具備inline-block屬性，有兩種方法

A、可以先觸發layout，再設定為inline，需要注意的是這兩個display必須在兩個CSS聲明中才有效，代碼如下：

div {     width:400px;     height:200px;     display:inline-block; } div {     display:inline; } 

B、直接設定為inline，再利用zoom來觸發layout來實作類別似效果：

div {     width:400px;     height:200px;     *display:inline;     *zoom:1; } 

3、其它瀏覽器

其它瀏覽器都支援這個屬性，但Firefox從3.0才開始支援這個屬性，對於之前的版本可以利用其私人屬性{display:-moz-inline-box}來實作類別似效果，但也可以忽略3.0之前的版本（這些版本的瀏覽器很少有人使用了）。

4、參考文獻

• CSS{display:inline-block}

 

 

 

1、display:inline-block

讓一個元素具有“區塊元素”的屬性（可以設定width和height），又具有“內嵌元素”的屬性（不產生換行）。

2、IE中的inline-block

IE6不支援這個屬性，但IE8開始支援這個屬性。

讓IE6內嵌元素具備inline-block特性

由於inline-block會觸發IE的layout，所以IE6中只要設定{display:inline-block;}即可。

讓IE6區塊元素具備inline-block屬性，有兩種方法

A、可以先觸發layout，再設定為inline，需要注意的是這兩個display必須在兩個CSS聲明中才有效，代碼如下：

div {     width:400px;     height:200px;     display:inline-block; } div {     display:inline; } 

B、直接設定為inline，再利用zoom來觸發layout來實作類別似效果：

div {     width:400px;     height:200px;     *display:inline;     *zoom:1; } 

3、其它瀏覽器

其它瀏覽器都支援這個屬性，但Firefox從3.0才開始支援這個屬性，對於之前的版本可以利用其私人屬性{display:-moz-inline-box}來實作類別似效果，但也可以忽略3.0之前的版本（這些版本的瀏覽器很少有人使用了）。

4、參考文獻

• CSS{display:inline-block}