inline-block 兼容性

时间:2020-12-01 08:55:06

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的效果。