柯大侠整理的常见浏览器兼容问题

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);
复制代码