柯大侠整理的常见浏览器兼容问题-白红宇

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