关于前端浏览器兼容性问题的总结

浏览器兼容性问题的原因

浏览器的兼容性问题，是我们在前端开发过程中必须要考虑到的问题，目前市面上的浏览器种类很多，所以导致对我们的代码的解析会存在多多少少的差异，但是有时候我们又必须要使用存在差异的代码，此时就需要对代码进行兼容性处理。主流浏览器的内核基本大同小异，这里大致可分为四种：Webkit内核、Presto内核、Trident内核、Gecko内核。 下图为国内常见浏览器的内核对比：

常见的浏览器兼容性问题以及解决办法

问题1：不同浏览器的元素标签默认的内外边距不同 解决方法：在全局css中使用通配符处理 *{margin:0;padding:0;}

问题2：img标签默认有间距 解决方法：使img浮动

问题3：cursor属性的兼容性问题 解决方法：firefox不支持hand，但ie支持pointer，统一使用pointer

问题4：IE浏览器不识别 min- 标志 解决方法：将两者都写上，例如 width: 80px;height: 35px; min-width: 80px; min-height: 35px;

问题5：JS获取浏览器窗口大小的兼容性问题 解决方法：使用兼容性写法，例如：获取网页内容实际宽高的写法 var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth; var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

问题6：event事件问题 解决方法：兼容性写法：document.onclick = function(ev){ var e = ev || window.event; //获取到event对象 }

问题7：JS 中innerText问题 解决方法：IE浏览器中使用textContent

问题8：JS中设置事件与移除事件的问题 解决方法：

function addEvent(obj,type,fn){//添加事件监听，参数分别为 对象、事件类型、事件处理机制（冒泡或捕获），默认为false if (obj.addEventListener) { obj.addEventListener(type,fn,false);//非IE } else{ obj.attachEvent('on'+type,fn);//ie写法，注意要加上 on }; } function removeEvent(obj,type,fn){//删除事件监听 if (obj.removeEventListener) { obj.removeEventListener(type,fn,false);//非IE } else{ obj.detachEvent('on'+type,fn); }; }

问题9：JS中阻止默认事件和阻止事件传播的兼容性问题 解决方法：

//js阻止事件传播 document.onclick=function(e){ var e=e||window.event; //获取事件对象的兼容性写法，上文提过 if (e.stopPropagation) { e.stopPropagation();//非IE }else{ e.cancelBubble=true;//IE写法 } //js阻止默认事件 document.onclick=function(e){ var e=e||window.event; if (e.preventDefault) { e.preventDefault();//非IE }else{ e.returnValue=false;//IE写法 }

问题10：JS中鼠标滚轮事件的兼容性问题 解决方法：

//火狐中的滚轮事件 document.addEventListener("DOMMouseScroll",function(event){ alert(event.detail);//若前滚的话为 -3，后滚的话为 +3 },false) //非火狐中的滚轮事件 document.onmousewheel=function(event){ alert(event.detail);//前滚：+120，后滚：-120 }