IE6/IE7下對(duì)display:inline-block的支持性不好。

?

?? 1、inline元素的display屬性設(shè)置為inline-block時(shí)，所有的瀏覽器都支持；

?

?? 2、block元素的display屬性設(shè)置為inline-block時(shí)，IE6/IE7瀏覽器是不支持的； ???????? 對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈遞在同一行，允許空格。（準(zhǔn)確地說，應(yīng)用此特性的元素現(xiàn)為內(nèi)聯(lián)對(duì)象，周圍元素保持在同一行，但可以設(shè)置寬度和高度等塊元素的屬性） ???????? IE中對(duì)內(nèi)聯(lián)元素使用display:inline-block，IE是不識(shí)別的，但使 用display:inline-block在IE下會(huì)觸發(fā)layout，從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表征。從 上面的這個(gè)分析，也不難理解為什么IE下，對(duì)塊元素設(shè)置display:inline-block屬性無法實(shí)現(xiàn)inline-block的效果。這時(shí)塊元 素僅僅是被display:inline-block觸發(fā)了layout，而它本身就是行布局，所以觸發(fā)后，塊元素依然還是行布局，而不會(huì)如Opera中 塊元素呈遞為內(nèi)聯(lián)對(duì)象。 IE6下塊元素如何實(shí)現(xiàn)display:inline-block的效果？ 有兩種方法： 1、 先使用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ì)消失）。 ?? 2、直接讓塊元素設(shè)置為內(nèi)聯(lián)對(duì)象呈遞（設(shè)置屬性display:inline），然后觸發(fā)塊元素的layout（如：zoom:1 或float屬性等）。代碼如下： ????? div { display:inline-block; _zoom:1;_display:inline;} /*推薦*/
????? div { display:inline-block; _zoom:1;*display:inline;} /*推薦:IE67*/

?

轉(zhuǎn)載于:https://www.cnblogs.com/jsingleegg/p/3480341.html

總結(jié)

以上是生活随笔為你收集整理的IE6/IE7下：inline-block不兼容的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。