IE 浏览器兼容问题案例一

共计划有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; }