display inline block是什麼意思

很多時候我們必須使一些塊元素併排顯示，一般想到的是必須使用浮動，

但是塊元素浮動給邊距(margin)的時候在ie下會出現加倍的bug

，所以很多時候不得不把這個塊元素套在乙個內聯元素裡面，然後給內聯元素浮動和邊距。今天看到了懌飛、秦歌和烏龍茶關於display:inline-block的文章，很不錯，綜合一下，記錄下來。

display:inline-block

簡單來說就是

將物件呈遞為內聯物件，但是物件的內容作為塊物件呈遞。

旁邊的內聯物件會被呈遞在同一行內，允許空格。但是這個屬性目前不是所有的瀏覽器都支援，只有opera和safari支援，firefox3和ie8據說將會支援，firefox2和ie使用特殊辦法可以實現這種效果，下面就來**一下

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

1、display:-moz-inline-stack

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

2、直接讓塊元素設定為內聯物件(display:inline)，然後通過zoom:1觸發塊元素的layout，**如下：

div

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值*/

display inline block是什麼意思

matplotlib inline 是什麼意思

matplotlib inline 是什麼意思

body英語什麼意思是什麼 gre是什麼意思啊？

display inline block是什麼意思

matplotlib inline 是什麼意思

matplotlib inline 是什麼意思

body英語什麼意思是什麼 gre是什麼意思啊？

相關推薦