关于IE低版本兼容问题
1，元素浮动之后，能设置宽度的话就给元素加宽度。如果需要宽度是内容撑开，就给它里边的块元素加上浮动；
解决方案：给需要宽度由内容撑开的元素加上浮动
css样式：
<style>
.box{
width:400px;
border: 1px solid black;
overflow:hidden;
}
.left{
float:left;
background:red;
}
.right{
float:right;
background: blue;
}
h2{
margin:0;
height:30px;
float:left;
}
</style>
html结构：
<div class="box">
<div class="left">
<h2>左边</h2>
</div>
<div class="right">
<h2>右边</h2>
</div>
</div>
2，第一块元素浮动，第二块元素加margin值等于第一块元素，在IE6下面有间隙问题；
解决方案：不建议这么写，用浮动解决
css样式：
<style>
.box{
width:500px;
}
.left{
width:200px;
height:200px;
float:left;
background:red;
}
.right{
width:200px;
height:200px;
background:blue;
margin-left:200px;
}
</style>
HTML结构：
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
3，IE6 下子元素超出父级宽度，会把父级的宽高撑开
解决方案：子元素高度不要超过父级高度
css样式：
<style>
.box{
width:200px;
height:200px;
border: 1px soild red;
}
.item{
width:100px;
height:460px;
background-color:blue;
}
</style>
HTML结构：
<div class="box">
<div class="item"></div>
</div>
3，p标签包含块元素嵌套规则。
解决方案：p标签不要嵌套块元素
HTML结构：
<p>
<div>div</div>
</p>
4，margin 兼容性问题，父级包含的时候子级的margin-top会传递给父级，同级元素上下外边距会叠压；
解决方案：
问题1，触发haslayout, BFC.
问题2，尽量使用同一方向的margin，比如都设置top或者bottom；或者用padding代替。
css样式：
<style>
.box{
background-color:green;
}
.head{
height:30px;
background-color:red;
margin:50px;
}
.content{
height:30px;
background-color:blue;
margin:50px;
}
</style>
HTML结构：
<div class="box">
<div class="head">head</div>
<div class="content">content</div>
</div>
5，display:inline-block
解决方案：针对IE6,7使用hack添加display：inline和zoom:1
css样式：
<style>
div{
width:100px;
height:100px;
display:inline-block;
border:1px solid red;
font-size:12px;
*display:inline;
*zoom:1;
}
span{
width:100px;
height:100px;
border:1px solid red;
font-size:24px;
*display:inline;
*zoom:1;
*margin-right:-4px;
}
section{
font-size:0;
}
</style>
HTML结构：
<p>块元素转内联快</p>
<hr>
<section>
<div>快1</div>
<div>块2</div>
<div>块3</div>
</section>
<p>内联元素转内联块</p>
<hr>
<section>
<span>内联1</span>
<span>内联2</span>
<span>内联3</span>
</section>
希望能帮助大家！
