共计划有22个小案例,但是没有太多时间一次弄完,只好每次1~2篇,希望在给自己总结的同时可以为大家提供一点点帮助.
虽然IE兼容性问题随着版本的提高逐渐淡出人们的视野,但站在这样新时代与旧时代的交接处,还是有必要了解一下IE 6/7/8 的兼容问题.
首先我们需要用到的工具一个IETester,可以自行下载,如果找不到的可以留言我.
它长这个样子--------->
案例1
问题原因:在IE 6下,子级的宽度会撑开父级设置好的宽度.
图例:
低版本
低版本
高版本
高版本.png
解决方案:将 子级的元素的宽度设置为* 小于等于* 父级元素的宽度盒模型的计算一定要准确,否则在IE下会出现问题.
上代码:
css
#box{
width: 400px;
}
.left{
width: 200px;
height: 300px;
background-color: red;
float: left;
}
.right{
width: 200px;
float: right;
}
.div{
width: 180px;
height: 180px;
padding: 15px;
background-color: blue;
}
html
<div id="box">
<div class="left"></div>
<div class="right">
<div class="div"></div>
</div>
</div>
解决方案:减小子级元素.div下的宽度
.div{ /*解决方案*/ width: 170px; height: 180px; padding: 15px; background-color: blue; }
