共計劃有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; }