IE兼容性问题的总结
2024-10-08 01:58:45
一、IE6/IE7对display:inline-block的支持欠缺
1、表现描述
这个应该算是很经典的ie兼容性问题了,inline-block作用就是将块级元素以行的等式显示。在主流浏览器中水平显示都没有问题,可是到ie6/ie7下就成垂直显示了。
(1)css代码:
#ul-menu{
margin:;
padding:;
list-style:none;
}
#ul-menu li{
inline-block;
margin-right:15px;
}
(2)HTML代码:
<ul id="ul-menu">
<li><a href="#">首页</a></li>
<li><a href="#">公司介绍</a></li>
<li><a href="#">联系我们</a></li>
</ul>
2、解决方法:
#ul-menu li{
display:inline-block;
_zoom:;
*display:inline;
}
二、IE6/IE7显示垂直滚动条
1、表现描述:
有时候页面就几个字,根本没有超出显示范围,IE6/IE7还会显示垂直滚动条。
2、解决方法:
html{
overflow:auto;
}
三、IE6不支持css min-width与min-height
1、表现描述:
有时候想让一个div最小高度为100px,但ie6中识别min-height不识别。
2、解决方法:
div{
min-height:100px;
height: auto !important;
height: 100px;
}
四、PNG图片透明
1、表现描述:
png的图片在ie6中,透明的部分会显示成灰色。
2、解决方法:
增加一个针对png的hack
img{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片路径', sizingMethod='crop');
}
五、IE6下浮动时margin双倍边距
1、表现描述
一个div,其css为float:left,然后margin-left:20px,在主流浏览器中显示没有问题,但在ie6中则会出现双倍边距,即为40px。
(1)CSS代码:
#test{
width:100px;
height:100px;
background:#ccc;
float:left;
margin-left:20px;
}
(2)HTML代码:
<div id="test"></div>
2、解决方法:
将对应样式增加display:inline属性
#test{
width:100px;
height:100px;
background:#ccc;
float:left;
margin-left:20px;
display:inline;
}
六、IE不能识别margin-top
1、表现描述:
顶部一个div,设置margin-top:120px;时,在主流浏览器下显示正常,在IE下没有效果
(1)HTML代码:
<body>
<div class="top"></div>
</body>
(2)CSS代码:
.top{
width: 1000px;
height: 200px;
margin-top: 120px;
border: 1px solid #CCC;
}
2、解决方法:
(1)仅是间距的显示,将margin-top换成padding-top即可(需注意padding对其背景的影响)。
.top{
width: 1000px;
height: 200px;
padding-top: 120px;
border: 1px solid #CCC;
}
(2).使这个块不直接跟在前面的这个绝对定位元素后面,比如在它们之间插入一个空div标签,或者交换这两个标签的前后位置
七、IE7不能按数组下标的方式读取字符串的字符
1、表现描述:
写js代码时,用数组下标的方式访问一个字符串的字符时,在ie7下得到值的为undefined,代码如下:
var str = "apple";
console.log(str[0]); //ie7中输出为undefined
2、解决方法:
var str="apple";
console.log(str.charAt(1)); //输出a
console.log(str.substring(0,1)); //输出a
console.log(str.slice(0,1)); //输出a
八、IE下option的onclick事件绑定
1、表现描述
有这样一个需求,用select做的list列表,option充当列表项,当点击option的时候显示这个option的文本,在chrome、firefox中直接绑定option的单击事件就可以实现,但ie下不可以。
(1)jquery代码:
<script type="text/javascript">
$(document).ready(function(){
$("#selFruit option").click(function(){
alert($(this).text());
});
})
</script>
(2)HTML代码:
<select id="selFruit " multiple=”multiple”>
<option value="0">apple</option>
<option value="1">orange</option>
<option value="2">banana</option>
</select>
2、解决方法:
可以先找到选中的(:selected)option对象,再操作这个对象,这种方法浏览器都支持,代码如下:
<script type="text/script">
$("#selFruit").click(function(){
var $opt =$(this).find('option:selected');
alert($opt.text());
});
</script>
九、IE不能支持CSS3属性nth-child
1、表现描述:
设置某一元素的第几个子元素单独的属性时,CSS3提供了nth-child属性,在Google,FireFox等浏览器下正常,但是该属性在IE下无效。
(1)HTML代码:
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
(2)CSS代码:
ul li:first-child {
background: #CCC;
} ul li:nth-child(2) {
background: #EEE;
} ul li:nth-child(3) {
background: #AAA;
}
2、解决办法:
用jQuery的属性解决:
$("ul li:nth-child(2)").css("background", "#CCC");
$("ul li:nth-child(3)").css("background", "#CCC");
十、上下margin重合
1、表现描述:
上面div设置margin-bottom,下面div设置margin-top。在IE和FireFox下产生了重合
(1)HTML代码:
<div class="top">
</div>
<div class="bottom">
</div>
(2)CSS代码:
.top {
width: 100px;
height: 100px;
background: #CCC;
margin-bottom: 50px;
} .bottom {
width: 100px;
height: 100px;
background: #EEE;
margin-top: 50px;
}
2、解决方法:
统一使用上方div的margin-bottom或者下方div的margin-top。
十一、div浮动,IE产生3px的bug
1、表现描述:
左边对象浮动,右边vaiyong外补丁的左边距来定位,在IE下,右边对象内的文本会离左边有3px的间距。
(1)HTML代码:
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
(2)CSS代码:
.box {
float: left;
width: 800px;
} .left {
float: left;
width: 50%;
} .right {
width: 50%;
}
2、解决方法:
(1)CSS代码中增加这行代码即可:
*html .left {
margin-right: -3px;
}
十二、IE6无法定义1px高度左右的容器
1、表现描述:
定义1px的容器,因为行高,导致IE6下无法定义。
2、解决方法:
overflow: hidden; | zoom: 0.08; | line-height: 1px;
<style>
<!--
div {
background: red;
}
-->
</style>
最新文章
- 字符串编辑距离(Levenshtein距离)算法
- Zookeeper:通过yarn实现大型分布式管理系统
- 在VMware Workstation上安装CentOS6.5系统步
- 如何从NFS文件系统启动
- iOS学习之Object-C语言内存管理高级
- (五)乱入之如何使用MNIST数据库
- [置顶] Java Web开发教程来袭
- underscorejs-reduce学习
- cocos2d_x_05_Box2D物理引擎
- Cocoa练习01:一个简单的Todo list程序
- GPU计算的十大质疑—GPU计算再思考
- C# 线程安全集合
- Maven 变量及常见插件配置详解
- linux(centos) 添加系统环境变量
- sitecore教程路径分析器
- hihocoder-1415 后缀数组三&#183;重复旋律3 两个字符串的最长公共子串
- .net百度编辑器的使用
- 基于RBAC权限验证, 中间价middleware实现, views 登录视图代码
- 【uoj121】 NOI2013—向量内积
- 竟然没有转载。。。A Few of My Favorite HTML5 and CSS3 Online Tools
热门文章
- 什么情况下,英文单词中的k发音变g,t发音变d,p发音变b
- Spring Cloud Feign Ribbon 配置
- SD-SDI播出系统---使用GTX TX产生恢复时钟
- js for dwg viewer in B/S
- Python标示符和关键字
- 黄聪:Pjax 无刷新开发web,更好用户体验
- 安装使用git
- draftsight的热补丁
- C++进阶--逻辑常数和比特位常数(Logical constness vs Bitwise constness)
- 《Kubernetes权威指南》笔记-Pod、容器与Node的关系