CSS:IE6/Ie7 display:inline-block 不起做用

在 IE六、IE7中不識別display:inline-block屬性，但使用inline-block屬性在IE下會觸發layout，從而使內聯元素 擁有了display:inline-block屬性的表症。從上面的分析也不難理解爲何IE六、IE7下對塊元素設置display:inline- block屬性沒法實現inline-block的效果。這時塊元素僅僅是被inline-block觸發了layout，而它本就是行佈局，因此觸發 後，塊元素依然是行佈局。IE8識別display:inline-block;

 

IE下塊元素如何實現 display:inline-block 的效果？
有兩種方法：
一、先使用 display:inline-block 屬性觸發塊元素，而後再定義 display:inline，讓塊元素呈遞爲內聯對象（兩個display 要前後放在兩個 CSS 聲明中才有效果，這是 IE 的一個經典 bug ，若是先定義了 display:inline-block，而後再將 display 設回 inline 或 block，layout 不會消失）。代碼以下（…爲省略的其餘屬性內容）：
div {display:inline-block;...}
div {display:inline;}
二、直接讓塊元素設置爲內聯對象呈遞（設置屬性 display:inline），而後觸發塊元素的 layout（如：zoom:1 等）。代碼以下：
div {display:inline; zoom:1;...}

 

若是是內聯元素使用了inline-block，那全部的瀏覽器顯示都是正常的。（ie六、ie7中對內聯元素使用display:inline-block，IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表徵。）
可是若是是塊級元素使用了inline-block，那在ie6和ie7中是有問題的。（ie6/ie7中塊元素僅僅是被display:inline-block觸發了layout，而它自己就是行佈局，因此觸發後，塊元素依然仍是行佈局，而不會像火狐等其餘瀏覽器塊元素呈遞爲內聯對象。）
那麼，ie6/ie7下塊元素如何實現display:inline-block的效果？解決方法以下：
讓標準瀏覽器識別display:inline-block;讓ie6/7識別 display:inline;來覆蓋上面的display:inline-block;而後經過zoom:1;來觸發haslayout讓inline 元素在ie中表現得和inline-block元素同樣。
.list1 li{display:inline-block; width:150px; *zoom:1;*display:inline;}
加上*zoom:1(觸發ie6和ie7下的haslayout);*display:inline(只有ie6和ie7識別);
注：必定要加在display:inline-block;後面。