關於ie7下display：inline-block；不支持的解決方案 關於ie7下display：inline-block；不支持的解決方案

關於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屬性等）。代碼以下：
  /*推薦:IE六、7*/ div { 

                                 display:inline-block;

                                *zoom:1;

                                *display: inline;

                               }

三者缺一不可

        /*推薦*/div {

                          display:inline-block;

                         _zoom:1;

                         _display:inline;

                        } 

 

 

二、（copy過來）

先使用display:inline-block屬性觸發塊元素，而後再定義display:inline，讓塊元素呈遞爲內聯對象（兩個display 要前後放在兩個CSS聲明中才有效果，這是IE的一個經典bug，若是先定義了display:inline-block，而後再將display設回 inline或block，layout不會消失）。代碼以下（...爲省略的其餘屬性內容）： 

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

 

轉載聲明：http://www.cnblogs.com/qiao20/p/6774888.html