解决 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
解决 IE7 中 display:inline-block 失效的问题的更多相关文章
- IE6/IE7中display:inline-block解决办法
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- 解决css中display:inline-block的兼容问题
*display:inline; *zoom:1; 不多说,ie6/7直接在元素添加以上的属性即可.
- 解决css中display:inline-block产生的空隙问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解决ie7下overflow:hidden失效问题
但父亲元素下面的子节点或者孙子节点有position:relative:或者absolute时,父亲即使设置了overflow:hidden:依然会溢出 解决方法可以: 在父亲元素上加上*positi ...
- css ie7中overflow:hidden失效问题及解决方法
css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- css 关于"浮动边距加倍"及其解决方法-------解决方案是在这个div里面加上display:inline;
写div代码的时候,经常发现明明宽度算得很准确,但是莫明其妙的会和计划的布局不太一样- -|||开始以为自己代码写的有问题,拼命找bug也一无所获,最后可能会稍微修改样式来达到想要的效果,但终究也是外 ...
- 在ie7中overflow:hidden失效问题及解决方案
css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
随机推荐
- Node.js系列——(1)安装配置与基本使用
1.安装 进入下载地址 小编下载的是msi文件,下一步下一步傻瓜式安装. 打印个hello看看: 2.REPL 全称Read Eval Print Loop,即交互式解释器,可以执行读取.执行.打印. ...
- Linux下编译程序时,经常会遇到“undefined reference to XXX” 报错,
Linux下编译程序时,经常会遇到“undefined reference to XXX” 报错, 这里总结一些可能的原因和解决方案,给需要的朋友: 说道undefined reference err ...
- MySQL专题3 SQL 优化
这两天去京东面试,面试官问了我一个问题,如何优化SQL 我上网查了一下资料,找到了不少方法,做一下记录 (一). 首先使用慢查询分析 通过Mysql 的Slow Query log 可以找到哪些SQ ...
- spring学习 8-面试(事务,解决线程安全)
1.介绍一下Spring的事物管理 参考:Spring 学习7 -事务 2.Spring如何处理线程并发问题 Spring使用ThreadLocal解决线程安全问题 参考:Spring学习11- ...
- EF中Json序列化对象时检测到循环引用的解决办法
MVC4 EF中将数据表外键引用的是自身,转换成Json时,总是提示错误:“序列化类型为....的对象时检测到循环引用.”: 解决办法: 把要序列化的对象转为匿名对象去掉导航属性,如下 :本来是var ...
- collection 多态 会自动转型为子类 继承多态需要显示转型
- QoS专题-第4期-QoS实现之限速
QoS实现之限速 通过前面几篇介绍,大家都知道了MQC是实现QoS的技术,优先级映射是实现QoS的前提条件.读完之后也许无法直观感觉到QoS是如何提升网络服务质量.今天小编给大家介绍限速,通过实验,可 ...
- KMP算法复习【+继续学习】
离NOIP还剩12天,本蒟蒻开始准备复习了. 先来个KMP[似乎我并没有写过KMP的blog] KMP KMP算法是解决字符串匹配问题的一个算法,主要是单对单的字符串匹配加速,时间复杂度O(m + n ...
- 洛谷 P4319 变化的道路 解题报告
P4319 变化的道路 题目描述 小 w 和小 c 在 H 国,近年来,随着 H 国的发展,H 国的道路也在不断变化着 根据 H 国的道路法,H 国道路都有一个值 \(w\),表示如果小 w 和小 c ...
- 三年java面试题
前言: 楼主毕业三年,从大学时期就开始一直从事java web方面的开发.我在去年的今天有一篇帖子:两年java面试经验.经历了一年的上班,成长了很多.今年因为某些原因辞职了.从2月底辞职,到3月初, ...