ie6, ie7兼容性问题以及处理办法汇总
1、IE6中绝对定位位置错误
问题描述：在ie6中，如果参照物没有触发haslayout ，那么绝对定位的容器的left和bottom就会有问题。
解决办法：在相对定位的父容器上加入 zoom:1 来触发ie的haslayout即可解决。
小技巧：通常我们在设置一个容器为position:relative的时候 ，都会加上zoom:1来解决很多ie下的问题。
2 、IE6中绝对定位1像素偏差
问题描述：在 IE6 下定位元素的父级宽高都为奇数时，那么在 IE6 下定位元素的 right和bottom都有1像素的偏差。
解决办法： 设为偶数。
3、IE6浮动元素双边距bug
问题描述： IE6下块元素有浮动和横向margin的时候，横向的margin值被放大成两倍。
解决办法： 给浮动元素加 display:inline。
4、IE67下li底部间隙的BUG
问题描述：在ie67下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙。
解决办法： 给li设置 float:left或者给li加vertical-align:top。
问题描述：在ie6中，如果参照物没有触发haslayout ，那么绝对定位的容器的left和bottom就会有问题。
解决办法：在相对定位的父容器上加入 zoom:1 来触发ie的haslayout即可解决。
小技巧：通常我们在设置一个容器为position:relative的时候 ，都会加上zoom:1来解决很多ie下的问题。
2 、IE6中绝对定位1像素偏差
问题描述：在 IE6 下定位元素的父级宽高都为奇数时，那么在 IE6 下定位元素的 right和bottom都有1像素的偏差。
解决办法： 设为偶数。
<style>
#box1{width:303px; height:303px;border:1px solid black; position:relative;}
#box2{ width:50px; height:50px; background:#7c1; position:absolute;right:-1px;bottom:-1px;}
</style>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
3、IE6浮动元素双边距bug
问题描述： IE6下块元素有浮动和横向margin的时候，横向的margin值被放大成两倍。
解决办法： 给浮动元素加 display:inline。
<style>
body{margin:0;}
.wrap{float:left;border:2px solid #000;}
.box{width:100px;height:100px;background:red;margin:0 100px;float:left;display:inline; }
/*
IE6下的双边距BUG:
在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍
解决办法: display:inline;
*/
</style>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
4、IE67下li底部间隙的BUG
问题描述：在ie67下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙。
解决办法： 给li设置 float:left或者给li加vertical-align:top。
<style>
.list{ width:300px;margin:0;padding:0;}
.list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px; vertical-align:top;}
.list a{float:left;}
.list span{float:right;}
/*
IE6，7下li的间隙
在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙
解决办法: 1.给li加浮动 或者 2.给li加vertical-align:top;
*/
</style>
<body>
<ul class="list">
<li>
<a href="#">文字文字文字文字文字</a>
<span>作者</span>
</li>
<li>
<a href="#">文字文字文字文字文字</a>
<span>作者</span>
</li>
</ul>
</body>
5、IE6下最小高度问题
问题描述：在IE6下高度小于19px的元素，高度会被当做19px来处理。
解决办法：设置font-size：0;
<style>
body{ margin:0;background:#000;}
.box{height:5px;background:red; font-size:0;}
/*
在IE6下高度小于19px的元素，高度会被当做19px来处理
解决办法:font-size:0; 或者 overflow:hidden;
*/
</style>
<body>
<div class="box"></div>
</body>
6、ie6 下子级的相对定位
问题描述：ie6 下父级的overflow:hidden;是包不住子级的相对定位的。
解决办法：父级也设为相对定位。
<style>
#box1{width:500px; height:300px; background:blue; overflow:hidden;position:relative;}
#box2{width:300px; height:500px; background:yellow; position:relative;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
7、在IE6下子元素margin问题
问题描述：在IE6下父级有边框的时候，子元素的margin值消失。
解决办法：触发父级的haslayout。
<style>
body{margin:0;}
.box{background:blue;border:1px solid #000;zoom:1;}
.div{width:200px;height:200px;background:red;margin:100px;}
</style>
<body>
<div class="box">
<div class="div"></div>
</div>
</body>
8、在IE6下的文字溢出BUG
问题描述：子元素的宽度和父级的宽度相差小于3px的时候或两个浮动元素中间有注释或者内嵌元素。
解决办法：用div把注释或者内嵌元素用div包起来。
<style>
.box{ width:400px;}
.left{float:left;}
.right{width:400px;float:right;}
</style>
<body>
<div class="box">
<div class="left"></div>
<div><!-- IE6下的文字溢出BUG --><span></span></div>
<div class="right">↓leo是个大胖子</div>
</div>
</body>
9、绝对定位元素消失
问题描述：当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失。
解决办法：给定位元素外面包个div。
<style>
.box{ width:200px;height:200px;border:1px solid #000; position:relative;}
span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}
ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}
</style>
<body>
<div class="box">
<ul></ul>
<span></span>
</div>
10、表单控件1px间隙
问题描述：在IE6，7下输入类型的表单控件上下各有1px的间隙。
解决办法：给input加浮动。
<style>
.box{ width:200px;height:32px;border:1px solid red;}
input{width:100px;height:30px;border:1px solid #000;margin:0;padding:0; float:left;}
</style>
<div class="box">
<input type="text" />
</div>
11、表单控件加border:none无效
问题描述：在IE6，7下输入类型的表单控件加border:none无效。
解决办法：重置input的背景。
.box{ width:200px;height:32px;border:1px solid red;background:yellow;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:#fff;}
<div class="box">
<input type="text" />
</div>
12、表单控件背景图片会移动
问题描述：在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动。
解决办法：把背景加给父级。
.box{ width:100px;height:30px;border:1px solid red;background:yellow; background:url(ball.png) no-repeat;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:none;}
<div class="box">
<input type="text" />
</div>
13、ie6下png
问题描述：ie6不支持png24的图片
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{ background:#000;}
.box{width:400px;height:400px;background:url(img/png.png);}
</style>
<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix('.box');
</script>
<![endif]-->
</head>
<body>
<div class="box"></div>
</body>
</html>