如何解決cssdisplaynlineblock的兼容性問題

今天就跟大家聊聊有關如何解決cssdisplaynlineblock的兼容性問題，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

兼容性：
IE6、IE7不識別inline-block但可以觸發塊元素。
其它主流瀏覽器均支持inline-block
解決IE6、IE7兼容性的方法：
1、首先設置inline-block觸發塊元素，具有了layout的特性，然后設置display:inline使塊元素呈現內聯元素，此時layout的特性不會消失。
2、直接設置display:inline，使用zoom:1觸發layout。
兼容所有瀏覽器的方法是：

CSS Code復制內容到剪貼板

1. display:inline-block; /* 現代瀏覽器 +IE6、7 inline 元素 */  

2. *display:inline; /* IE6、7 block 元素 */  

3. *zoom:1;  

下面簡單介紹下：

1、實例演示效果


2、display:inline-block作用?
使用display:inline-block屬性，可以使行內元素或塊元素能夠變成行內塊元素，簡單直白點講就是不加float屬性就可以定義自身的寬、高，同時又能使該元素輕松在父元素居中顯示！
3、什么時候會用到display:inline-block?
在網站布局中，很多時候，子元素中使用行內元素如span或塊元素li標簽且標簽個數不定，而我們又想讓這一塊不管個數有多少個(子元素的總體寬度不定)，始終都能居中顯示！這個時候display:inline-block就能派上用場了！
4、ie6/7支持display:inline-block這個屬性嗎？
在內聯元素上定義display:inline-block屬性，發現IE6、IE7中的顯示效果同其它瀏覽器一致，但事實是ie7及更低版本的ie瀏覽器不支持display:inline-block這個屬性！
正確的解釋是"使用inline-block屬性在IE下會觸發layout，因此元素上設置的width、height是能生效的，所以也就有了同其它瀏覽器一致的顯示效果",而不能說IE6/7支持 display:inline-block！
5、行內元素只需定義display:inline-block，顯示效果各瀏覽器都是一致，IE7下塊元素如何實現 display:inline-block 的效果？？
在IE下，display: inline-block只是觸發了元素的layout。比如將display: inline-block設置到div上，只能保證這個div擁有塊元素的特征（可以設置寬度，高度等），但還是會產生換行。接下來要設置display: inline，使其不產生換行。將display:inline-block;*display:inline;寫在同一個樣式上，inline-block屬性是不會觸發元素的layout的，因此我們還要額外加上 *zoom:1來觸發layout!
6、IE7下塊元素如何兼容 display:inline-block寫法？
實際有效的方法共有2種：
方法1：直接讓塊元素設置為內聯對象呈遞（設置屬性 display:inline），然后觸發塊元素的 layout（如：zoom:1 等）。兼容各瀏覽器的代碼如下： div {display:inline-block;*display:inline; *zoom:1;...}
方法2：先使用 display:inline-block 屬性觸發塊元素，然后再定義 display:inline，讓塊元素呈遞為內聯對象（兩個display 要先后放在兩個 CSS 樣式聲明中才有效果，這是 IE 的一個經典 bug ，如果先定義了 display:inline-block，然后再將 display 設回 inline 或 block，layout 不會消失）。代碼如下（…為省略的其他屬性內容）： div {display:inline-block;...}div {*display:inline;}
7、display:inline-block元素間會產生多余空白怎么解決？
display:inline-block元素間會產生多余空白,這是inline-block本身特性！

看完上述內容，你們對如何解決cssdisplaynlineblock的兼容性問題有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。