關於ie7下display:inline-block;不支持的解決方案。


今天碼的時候遇到這個問題了。

如果本身是內聯元素的,把它的display屬性設置設置為inline-block時,所有瀏覽器都是支持的。

相反,如果本身是塊級元素的,把它設為display:inline-block;  那么ie6/ie7都是不支持的。

IE中對內聯元素使用display:inline-block,IE是不識別的,但使用display:inline-block在IE下會觸發layout,從而使內聯元素擁有了display:inline-block屬性的表征。

這時塊元素僅僅是被display:inline-block觸發了layout,而它本身就是行布局,所以觸發后,塊元素依然還是行布局,而不會如Opera中塊元素呈遞為內聯對象。

解決方案:

1.(這個是我這次使用的)

直接讓塊元素設置為內聯對象呈遞(設置屬性display:inline),然后觸發塊元素的layout(如:zoom:1 或float屬性等)。代碼如下:
  /*推薦:IE6、7*/ div { 

                                 display:inline-block;

                                *zoom:1;

                                *display: inline;

                               }

        /*推薦*/div {

                          display:inline-block;

                         _zoom:1;

                         _display:inline;

                        } 

 

 

2、(copy過來)

先使用display:inline-block屬性觸發塊元素,然后再定義display:inline,讓塊元素呈遞為內聯對象(兩個display 要先后放在兩個CSS聲明中才有效果,這是IE的一個經典bug,如果先定義了display:inline-block,然后再將display設回 inline或block,layout不會消失)。代碼如下(...為省略的其他屬性內容): 

div {display:inline-block;...} 
div {display:inline;}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM