inline-block 兼容性

inline-block 兼容性

一般網頁模板都須要動態添加或刪除內容，在作網頁導航的時候，須要nav中的ul可以居中並實現自適應拓展，若是ul是固定的長度很好實現居中，只須要設置margin:0 auto;就行。可是這裏ul的長度是不肯定的，設置了margin-left就無法自適應居中了。在FF和IE7以上的瀏覽器中，設置.nav{text-align:center;},.nav ul{display:inline-block;padding：0;margin：0;}就ok了，可是在IE6中不行。

1)  在IE六、IE7中不識別display:inline-block屬性，但使用inline-block屬性在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表症。

2)  在IE5.5中開始支持 inline-block 。你可使用 inline-block 使對象得到佈局而無需指定確切的高( height )和寬( width )。

3) In IE 6 and 7 inline-block works only on elements that have a natural display: inline.
意思是說，IE6/7的inline-block屬性只對原生默認的內聯元素(span, a, em......)有效，對於塊級元素(div,p,ul......)無效。 
IE doesn't apply the value inline-block for the CSS display property on HTML elements that default to block level.

4) 那麼如今有兩個結論： 一、IE6/7不識別inline-block，只是觸發了layout，表現跟真實同樣。
二、IE6/7不徹底支持inline-block，只對內聯元素有效。

5) 找到了官方的說法，應該算是最正宗的了吧。。 
The following table shows Cascading Style Sheets (CSS) properties and corresponding values that, if set, cause an element to have layout. 
如下屬性一旦設置，將觸發元素的layout： 
CSS propertyValue 
display        inline-block 
height        any value 
float        left or right 
positionabsolute 
width        any value 
-ms-writing-modetb-rl 
zoom        any value

6)  延伸一個問題：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;...}

最後問題能夠這樣解決：

.nav{...

text-align:center;

}
.nav ul{display:inline-block !important;*display:inline;zoom:1;margin:0;padding:0;}

display:inline-block !important;能在FF，IE7以上的瀏覽器中實現,由於他們支持；

*display:inline能使IE6保持行內元素，zoom：1能觸發IE6的layout，就能實現display:inline-block的效果。