我们在做首页菜单选项的时候,通常会用 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
时间: 2024-11-09 05:08:48