柯大俠整理的常見瀏覽器兼容問題

HTML中的兼容問題

• 不一樣瀏覽器的標籤默認的外補丁和內補丁不一樣；

場景：隨便寫幾個標籤，不加樣式控制的狀況下，各自的margin 和padding差別較大。
解決方法：上來先消除默認樣式*{margin:0;padding:0;}；
複製代碼

• 塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大（即雙倍邊距bug）；

場景：常見症狀是IE6中後面的一塊被頂到下一行；
解決方法：在float的標籤樣式控制中加入 display:inline;將其轉化爲行內屬性
複製代碼

• IE6中 z-index失效

場景：元素的父級元素設置的z-index爲1，那麼其子級元素再設置z-index時會失效，其層級會繼承父級元素的設置，形成某些層級調整上的BUG；
緣由：z-index起做用有個小小前提，就是元素的position屬性要 是relative，absolute或是fixed。
解決方案：1.position:relative改成position:absolute；2.去除浮動；3.浮動元素添加position屬性（如relative，absolute等）。
複製代碼

• 在寫a標籤的樣式，寫的樣式沒有效果，其實只是寫的樣式被覆蓋了

正確的a標籤順序應該：link/ visited/hover/active
複製代碼

• 24位的png圖片，ie6中不兼容透明底兒

解決方式：使用png透明圖片唄，可是須要注意的是24位的PNG圖片在IE6是不支持的
解決方案有兩種：1.使用8位的PNG圖片；2.爲IE6準備一套特殊的圖片
複製代碼

js在不一樣瀏覽器中的兼容問題

• 事件監聽的兼容

IE不支持addEventListener； 解決：給IE使用attachEvent

var addHandler = function(el, type, handler, args) {
    if (el.addEventListener) {
        el.addEventListener(type, handler, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + type, handler);
    } else {
        el['on' + type] = handler;
    }
};
var removeHandler = function(el, type, handler, args) {
    if (el.removeEventListener) {
        el.removeEventListener(type, handler, false);
    } else if (el.detachEvent) {
        el.detachEvent('on' + type, handler);
    } else {
        el['on' + type] = null;
    }
};
複製代碼

• event.target的兼容，引起事件的DOM元素。

IE6789不支持event.target； 解決方法：event.srcElement;

// 如下爲兼容寫法
target = event.target || event.srcElement;
複製代碼

• 阻止系統默認的兼容

IE6789不支持event.preventDefault；

// 如下爲兼容寫法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
複製代碼

• 阻止事件冒泡的兼容

IE6789不支持event.stopPropagation；

// 如下爲兼容寫法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = false);
複製代碼