瀏覽器的兼容性

瀏覽器的兼容性

html5兼容

html5有不少新增的標籤，在不支持html5的瀏覽器中不能正常顯示。
解決方法：
使用html5的靜態資源；
加入腳本代碼，document.createElement建立新的標籤，並display:block;設置爲塊類型

css兼容

一、png24位的圖片在ie6瀏覽器上出現背景，解決方案是作成png8

二、瀏覽器默認的margin和padding不一樣，解決方案是 * {margin:0;padding:0;}

三、IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大
    
    浮動ie產生的雙倍距離
    #box {
        float:left;
        width:10px;
        margin:0 0 0 10px;
    }
    這種狀況下ie會產生20px的距離
    解決方案是在float的標籤樣式中加入_display:inline;(_這個符號只有ie6會識別)
    
四、IE兼容
    漸進識別的方式
    
    首先，"\9"將IE9瀏覽器從全部狀況下分離出來
    接着，"+"將IE8和IE七、IE6分離開來
    .box{
        background-color:#f1ee18;  //全部均可識別
        background-color:#00deff\9;   //IE六、七、8
        +background-color:#a200ff;   //IE六、7
        _background-color:#1e0bd1;    //IE6
    }

---

五、IE條件註釋
<!--[if IE 6]>此處內容僅IE6可見<![endif]-->

六、IE6沒法定義1px左右高度的容器，是由於默認的行高形成的,解決的方法也有不少,
例如: overflow:hidden zoom:0.08 line-height:1px 

七、使用margin：0 auto；方法使容器居中依然在IE6中行不通，咱們要對其父容器使用text-align:center;

八、超連接訪問順序L-V-H-A a:lind,a:visited,a:hover.a:active

九、Chrome中文界面下默認會將小於12px的文本強制按照12px顯示
解決方案：-webkit-text-size-adjust:none;

十、在使用絕對定位/相對定位時，設置z-index在ie中可能會失效
是由於其元素依賴於其父元素的z-index，而父元素默認爲0，因此子元素z-index高，而父元素低，依然不會改變其顯示順序；

javascript兼容

一、在標準的事件綁定中綁定事件的方法函數爲 addEventListener,而IE使用的是attachEvent

二、標準瀏覽器採用事件捕獲的方式對應IE的事件冒泡機制（即標準由最外元素至最內元素或者IE由最內元素到最外元素）最後標準方亦以爲IE這方面的比較合理，因此便將事件冒泡歸入了標準，這也是addEventListener第三個參數的由來，並且事件冒泡做爲了默認值。

三、事件處理中event屬性，標準瀏覽器是做爲參數帶入，而ie是window.event方式得到。

四、得到目標元素ie爲e.srcElement 標準瀏覽器爲e.target

五、IE下，可使用獲取常規屬性的方法來獲取自定義屬性，也可使用getAttribute()獲取自定義屬性；
Firfox只能使用getAttribute()獲取自定義屬性；
解決方法：統一使用getAttribute()

六、IE下，event對象有x,y屬性，可是沒有pageX,pageY屬性；
   Firefox，event對象有pageX,pageY屬性，可是沒有x,y屬性。
   解決方法：條件註釋  <!--if lt ie>......<endif-->