display:inline-block 在IE6中实现

此文摘自：http://blog.sina.com.cn/hututuzhu 前端之路 （博客）

1、IE6/7不识别inline-block，只是触发了layout，表现跟真实一样。
2、IE6/7不完全支持inline-block，只对内联元素有效。

 

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

 

转载于:https://www.cnblogs.com/zhupinglei/archive/2012/05/03/2480616.html