解决 IE7 中 display:inline-block 失效的问题

我们在做首页菜单选项的时候，通常会用 li 标签去做，通过对 li 标签设置样式: display:inline-block 可以让 li 标签横排显示。但是这样做，在 IE7 浏览器下面会有一个兼容性问题： display:inline-block 不会被识别。

　　如在下面的 html 结构中：

<ul class="nav">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

在 非 IE7 浏览器中，排版下：


　

IE7 浏览器中排版如下：

　　


怎么解决这个问题呢？主要有以下两种方案：

针对通过 li { display:inline-block} 来做横排菜单的需求，有以下两个解决方案：

　　解决方案 一： 对 li 设置样式（或者向右 浮动）

li {
display:block;
float:left;
margin-left:20px;
}

解决方案 二：专门为 IE7 写 hack。

　　

li {
position:relative;
width: 100px;
height: 40px;
background: #eee;
margin: 10px;
/*关键代码*/
display: inline-block;
/*兼容处理 ie7 下 display:inline-block 不起效的问题*/
*display: inline;
*zoom: 1;
}

　　

　　解决方案参考链接：

　　　　　1. css hack解决 IE7 下 display:inline-block 不起效的问题： http://blog.csdn.net/linlin_juejue/article/details/6622756

　　　　　2. IE 中的 zoom 属性的作用：/article/1300588.html