css display inline block 兼容性問(wèn)題寫法

發(fā)布時(shí)間：2016-01-10 12:34:18 作者：佚名

今天在寫布局的時(shí)候發(fā)現(xiàn)的一個(gè)bug，如果不這樣就達(dá)不到預(yù)期的效果，無(wú)法兩行排列，原來(lái)ie6、ie7下對(duì)display:inline-block不支持，所以需要用到css hack才可以

兼容性：

IE6、IE7不識(shí)別inline-block但可以觸發(fā)塊元素。

其它主流瀏覽器均支持inline-block。

解決IE6、IE7兼容性的方法：

1、首先設(shè)置inline-block觸發(fā)塊元素，具有了layout的特性，然后設(shè)置display:inline使塊元素呈現(xiàn)內(nèi)聯(lián)元素，此時(shí)layout的特性不會(huì)消失。

2、直接設(shè)置display:inline，使用zoom:1觸發(fā)layout。

兼容所有瀏覽器的方法是：

CSS Code復(fù)制內(nèi)容到剪貼板

display:inline-block; /* 現(xiàn)代瀏覽器 +IE6、7 inline 元素 */
*display:inline; /* IE6、7 block 元素 */
*zoom:1;

下面簡(jiǎn)單介紹下：

1、實(shí)例演示效果

2、display:inline-block作用?

使用display:inline-block屬性，可以使行內(nèi)元素或塊元素能夠變成行內(nèi)塊元素，簡(jiǎn)單直白點(diǎn)講就是不加float屬性就可以定義自身的寬、高，同時(shí)又能使該元素輕松在父元素居中顯示！

3、什么時(shí)候會(huì)用到display:inline-block?

在網(wǎng)站布局中，很多時(shí)候，子元素中使用行內(nèi)元素如span或塊元素li標(biāo)簽且標(biāo)簽個(gè)數(shù)不定，而我們又想讓這一塊不管個(gè)數(shù)有多少個(gè)(子元素的總體寬度不定)，始終都能居中顯示！這個(gè)時(shí)候display:inline-block就能派上用場(chǎng)了！

4、ie6/7支持display:inline-block這個(gè)屬性嗎？

在內(nèi)聯(lián)元素上定義display:inline-block屬性，發(fā)現(xiàn)IE6、IE7中的顯示效果同其它瀏覽器一致，但事實(shí)是ie7及更低版本的ie瀏覽器不支持display:inline-block這個(gè)屬性！
正確的解釋是"使用inline-block屬性在IE下會(huì)觸發(fā)layout，因此元素上設(shè)置的width、height是能生效的，所以也就有了同其它瀏覽器一致的顯示效果",而不能說(shuō)IE6/7支持 display:inline-block！

5、行內(nèi)元素只需定義display:inline-block，顯示效果各瀏覽器都是一致，IE7下塊元素如何實(shí)現(xiàn) display:inline-block 的效果？？

在IE下，display: inline-block只是觸發(fā)了元素的layout。比如將display: inline-block設(shè)置到div上，只能保證這個(gè)div擁有塊元素的特征（可以設(shè)置寬度，高度等），但還是會(huì)產(chǎn)生換行。接下來(lái)要設(shè)置display: inline，使其不產(chǎn)生換行。將display:inline-block;*display:inline;寫在同一個(gè)樣式上，inline-block屬性是不會(huì)觸發(fā)元素的layout的，因此我們還要額外加上 *zoom:1來(lái)觸發(fā)layout!

6、IE7下塊元素如何兼容 display:inline-block寫法？

實(shí)際有效的方法共有2種：

方法1：直接讓塊元素設(shè)置為內(nèi)聯(lián)對(duì)象呈遞（設(shè)置屬性 display:inline），然后觸發(fā)塊元素的 layout（如：zoom:1 等）。兼容各瀏覽器的代碼如下： div {display:inline-block;*display:inline; *zoom:1;...}
方法2：先使用 display:inline-block 屬性觸發(fā)塊元素，然后再定義 display:inline，讓塊元素呈遞為內(nèi)聯(lián)對(duì)象（兩個(gè)display 要先后放在兩個(gè) CSS 樣式聲明中才有效果，這是 IE 的一個(gè)經(jīng)典 bug ，如果先定義了 display:inline-block，然后再將 display 設(shè)回 inline 或 block，layout 不會(huì)消失）。代碼如下（…為省略的其他屬性內(nèi)容）： div {display:inline-block;...}div {*display:inline;}

7、display:inline-block元素間會(huì)產(chǎn)生多余空白怎么解決？

display:inline-block元素間會(huì)產(chǎn)生多余空白,這是inline-block本身特性！
嚴(yán)格來(lái)講不算BUG,使用font-size設(shè)置可以解決，解決display:inline-block元素間多余空白的相關(guān)文章：http://www.dbjr.com.cn/css/76707.html