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)  在IE6、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) 那么现在有两个结论： 1、IE6/7不识别inline-block，只是触发了layout，表现跟真实一样。
2、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 的效果？
有两种方法：
1、先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 声明中才有效果，这是 IE 的一个经典 bug ，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。代码如下（…为省略的其他属性内容）：
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递（设置属性 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的效果。