我们在做首页菜单选项的时候,通常会用 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

解决 IE7 中 display:inline-block 失效的问题的更多相关文章

  1. IE6/IE7中display:inline-block解决办法

    IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...

  2. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  3. 解决css中display:inline-block的兼容问题

    *display:inline; *zoom:1; 不多说,ie6/7直接在元素添加以上的属性即可.

  4. 解决css中display:inline-block产生的空隙问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 解决ie7下overflow:hidden失效问题

    但父亲元素下面的子节点或者孙子节点有position:relative:或者absolute时,父亲即使设置了overflow:hidden:依然会溢出 解决方法可以: 在父亲元素上加上*positi ...

  6. css ie7中overflow:hidden失效问题及解决方法

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  7. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  8. css 关于"浮动边距加倍"及其解决方法-------解决方案是在这个div里面加上display:inline;

    写div代码的时候,经常发现明明宽度算得很准确,但是莫明其妙的会和计划的布局不太一样- -|||开始以为自己代码写的有问题,拼命找bug也一无所获,最后可能会稍微修改样式来达到想要的效果,但终究也是外 ...

  9. 在ie7中overflow:hidden失效问题及解决方案

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

随机推荐

  1. Node.js系列——(1)安装配置与基本使用

    1.安装 进入下载地址 小编下载的是msi文件,下一步下一步傻瓜式安装. 打印个hello看看: 2.REPL 全称Read Eval Print Loop,即交互式解释器,可以执行读取.执行.打印. ...

  2. Linux下编译程序时,经常会遇到“undefined reference to XXX” 报错,

    Linux下编译程序时,经常会遇到“undefined reference to XXX” 报错, 这里总结一些可能的原因和解决方案,给需要的朋友: 说道undefined reference err ...

  3. MySQL专题3 SQL 优化

    这两天去京东面试,面试官问了我一个问题,如何优化SQL 我上网查了一下资料,找到了不少方法,做一下记录 (一). 首先使用慢查询分析  通过Mysql 的Slow Query log 可以找到哪些SQ ...

  4. spring学习 8-面试(事务,解决线程安全)

    1.介绍一下Spring的事物管理 参考:Spring 学习7 -事务 2.Spring如何处理线程并发问题    Spring使用ThreadLocal解决线程安全问题 参考:Spring学习11- ...

  5. EF中Json序列化对象时检测到循环引用的解决办法

    MVC4 EF中将数据表外键引用的是自身,转换成Json时,总是提示错误:“序列化类型为....的对象时检测到循环引用.”: 解决办法: 把要序列化的对象转为匿名对象去掉导航属性,如下 :本来是var ...

  6. collection 多态 会自动转型为子类 继承多态需要显示转型

  7. QoS专题-第4期-QoS实现之限速

    QoS实现之限速 通过前面几篇介绍,大家都知道了MQC是实现QoS的技术,优先级映射是实现QoS的前提条件.读完之后也许无法直观感觉到QoS是如何提升网络服务质量.今天小编给大家介绍限速,通过实验,可 ...

  8. KMP算法复习【+继续学习】

    离NOIP还剩12天,本蒟蒻开始准备复习了. 先来个KMP[似乎我并没有写过KMP的blog] KMP KMP算法是解决字符串匹配问题的一个算法,主要是单对单的字符串匹配加速,时间复杂度O(m + n ...

  9. 洛谷 P4319 变化的道路 解题报告

    P4319 变化的道路 题目描述 小 w 和小 c 在 H 国,近年来,随着 H 国的发展,H 国的道路也在不断变化着 根据 H 国的道路法,H 国道路都有一个值 \(w\),表示如果小 w 和小 c ...

  10. 三年java面试题

    前言: 楼主毕业三年,从大学时期就开始一直从事java web方面的开发.我在去年的今天有一篇帖子:两年java面试经验.经历了一年的上班,成长了很多.今年因为某些原因辞职了.从2月底辞职,到3月初, ...