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

james_kw1688發表於2019-05-07
瀏覽器

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);
複製程式碼

相關文章