1、IE6 双边距的问题
这个的意思是，如果我将一个div使用float的情况下，不管是向左还是向右都会出现双倍的间距，我举一个最简单的例子说明一下。
<!DOCTYPE html>看到这个代码，可以很清楚的看到，这个效果应该是下面的:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.box{
width: 200px;
height: 200px;
background-color: #ff89d9;
margin-left: 50px;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
但是在IE6的情况下，效果是这样的：
也就是在IE6中，左边的间距变成了100px，那要如何解决这个问题呢？给浮动元素加上display:inline。
修改的代码：
.box{
width: 200px;
height: 200px;
background-color: #ff89d9;
margin-left: 50px;
float: left;
display: inline;
}这样效果就达到了：
2、li里元素都浮动，li在IE6 7下方会产生4px间隙问题
先举一个例子说明下这个问题：
html结构：
<ul class="list">css样式：
<li>
<a href="">左边</a>
<span>右边</span>
</li>
<li>
<a href="">左边</a>
<span>右边</span>
</li>
<li>
<a href="">左边</a>
<span>右边</span>
</li>
<li>
<a href="">左边</a>
<span>右边</span>
</li>
</ul>
.list{
margin:0;
padding:0;
list-style:none;
width:300px;
}
.list li{
height:30px;
border:1px solid red;
line-height:30px;
}
.list li a{
float: left;
}
.list li span{
float: right;
}在Chrome下的显示效果是：
在IE6下的显示效果是：
很明显的可以看到，li之间增加 vertical-align: top;了4px的间隙，要解决这个问题，可以采用 vertical-align: top;这个属性，因为只是针对IE6 7，所以可以写成 *vertical-align: top;。
3、浮动元素之间添加了注释，导致多复制了文字问题
同样地，为了描述这个问题，我先抛砖引玉一下：
html结构如下：
<div class="wrap">css样式如下：
<div class="left"></div>
<span></span><!-- IE下文字溢出BUG -->
<div class="right">↓这是多出来的一只猪</div>
</div>
.wrap{
width: 400px;
}
.left{
float: left;
}
.right{
width: 400px;
float: right;
}
从代码上看好像没什么问题，就是显示一句话，在普通的浏览器下显示确实没问题，但是呢，在IE6下惊人的结果如下：
后面怎么多了几个文字！这个就是因为“两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px”导致这个问题的出现，解决方法如下：
1） 两个浮动元素中间避免出现内联元素或者注释
2）与父级宽度相差3px或以上
现在我修改一下代码，将子元素的宽度改为相差3px的宽度，修改如下：
.right{
width: 397px;
float: right;
} 效果就是正常的了：
4、IE6 7父级元素的overflow:hidden;包不住子级的relative
为了实现这个效果，我们首先需要创建一个含有父级和子级的结构：
<div class="box">然后呢，编写一些样式：
<div class="content"></div>
</div>
.box{
width: 100px;
height: 100px;
border: 2px solid #ff89d9;
background-color: #000000;
overflow: hidden;
}
.content{
width:400px;
height: 400px;
background-color: #64b0ff;
position: relative;
}
在Chrome下效果如下，没有问题：
在IE6下的效果如下，父级没有包住子级：
那如何解决这个问题呢？针对IE6 7给父级元素也添加相对定位，修改代码如下：
.box{
width: 100px;
height: 100px;
border: 2px solid #ff89d9;
background-color: #000000;
overflow: hidden;
position: relative;
} 这样就没问题了。
5、IE6下绝对定位元素父级宽高是奇数，绝对定位元素的right和bottom值会有1px的偏差
为了实现这个效果，我们首先需要创建一个含有父级和子级的结构：
<div class="box">然后呢，编写一些样式，父级宽高是奇数：
<div class="content"></div>
</div>
.box{
width: 201px;
height: 201px;
background-color: #66d3ff;
position: absolute;
}
.content{
width: 100px;
height:100px;
background-color: #faa542;
position: absolute;
right: 0;
bottom:0;
}
在Chrome下效果如下，没有问题：
在IE6下的效果如下，right和bottom有1px的偏差：
解决方法：避免父级宽高出现奇数。
6、IE6下绝对定位元素和浮动元素并列，绝对定位元素消失
为了模仿这种效果，我写了如下的代码：
<!DOCTYPE html>div和span并列，而且div是浮动元素，span是绝对定位元素。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #66d3ff;
border: 1px solid #000;
position: relative;
}
.item{
width: 150px;
height: 150px;
background-color: #ff89d9;
float: left;
margin-left:50px;
*display: inline;
}
.box span{
width: 50px;
height: 50px;
background-color: #ffcb38;
position: absolute;
top:-10px;
right: -10px;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<span></span>
</div>
</body>
</html>
在Chrome下的效果是：
在IE6 下的效果是：
在IE6 下绝对定位的元素span消失了，既然出现这个问题的原因是因为绝对定位元素和浮动元素并列，那么解决方法就是不要让这样的两个元素并列，处于同级关系就可以，修改代码如下：
<div class="box">7、IE6 下input间隙问题
<div class="item"></div>
<p>
<span></span>
</p>
</div>
既然是input出现间隙问题，那就直接写一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
background-color: #ff2834;
border: 1px solid #000000;
}
.box input{
width: 200px;
height: 30px;
border:0;
margin:0;
background-color: #fff;
}
</style>
</head>
<body>
<div class="box">
<input type="text">
</div>
</body>
</html>
在Chrome下的效果是：
在IE6 下的效果是：
从上面的效果图中可以很明显的看到，上下都多了一条间隙，而且是div的的背景颜色，那么要如何解决这个小bug呢？给input增加一个float:left;就可以。
8、IE6 下输入类型表单控件背景问题
设计代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
height: 30px;
background: url(images/email.png) no-repeat;
}
</style>
</head>
<body>
<input type="text"/>
</body>
</html>
在Chrome下的效果是：
在IE6 下的效果是：
在IE6下，当文字输入超出框的时候，背景图片会被移动，解决这个问题的方法：给背景架一个fixed属性，将背景固定就可以，修改代码如下：
input{
height: 30px;
text-indent: 30px;
background: url(images/email.png) no-repeat fixed;
}修改完的效果：
