关于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>

希望能帮助大家！