解决 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 属性的作用：http://www.jb51.net/css/40285.html

 

转载于:https://www.cnblogs.com/alicePanZ/p/4818713.html