前端常见浏览器兼容性问题

引言：

不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎
所以浏览器兼容性问题一般指：css兼容、js兼容

兼容css

1. 不同浏览器的标签默认的margin和padding不同
解决方案：*{ padding: 0; margin: 0;}
对于样式的差异，我经常会在项目中去创建一个reset.css文件，进行重置样式
2. css3新属性要加浏览器前缀兼容早期浏览器

-moz-		火狐浏览器的私有属性
-ms-		ie浏览器的私有属性
-webkit-	苹果、谷歌浏览器的私有属性
-o-			欧鹏浏览器的私有属性

3. 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
4. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
解决方案：

1. 给超出高度的标签设置overflow:hidden;
2. 或者设置行高line-height 小于你设置的高度。

5.行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
解决方案： 在display:block;后面加入display:inline;display:table;
6.IE浏览器div最小宽度和高度的问题
IE不认得min-这个定义
解决方案：

#box{
	  width: 80px;
	  height: 35px;
}
html>body #box{
	 width: auto;
	 height: auto; 
	 min-width: 80px; 
	 min-height: 35px;
 }

7.超链接访问过后hover样式就不出现的问题
解决方案：按照L-V-H-A顺序书写

a:link {}
a:visited {}
a:hover {}
a:active {}

8.图片默认有间距
解决方案：

1.给图片的父盒子添加font-size:0;图片之间就没有空隙
2.图片都设置浮动
3.将<img>写在一行上

js兼容

1.事件绑定
IE: dom.attachEvent();
标准浏览器: dom.addEventListener(‘click',function(event){},false);
移除：removeEventListener和IE：detachchEvent

var x = document.getElementById("myBtn");
if (x.addEventListener) {   //所有主流浏览器，ie9+
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {      // IE 8 及更早 IE 版本
    x.attachEvent("onclick", myFunction);
}

2.事件对象问题

    document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
        var e=ev;
        console.log(e);
    }
    document.onclick=function(){//谷歌和IE支持，火狐不支持；
        var e=event;
        console.log(e);
    }
    document.onclick=function(ev){//兼容写法；
        var e=ev||window.event;
        var mouseX=e.clientX;//鼠标X轴的坐标
        var mouseY=e.clientY;//鼠标Y轴的坐标
    }

3. event.srcElement(事件源对象)问题
IE： event对象有srcElement属性，但是没有target属性；
Firefox: event对象有target属性，但是没有srcElement属性。

srcObj = event.srcElement?event.srcElement:event.target;

3. 获取元素的非行间样式值

IE: dom.currentStyle[‘width’]获取元素高度
标准浏览器： window.getComputedStyle(obj, null)['width'];

 // 获取元素属性值的兼容写法
  function getStyle(obj,attr){
      if(obj.currentStyle){
         //兼容IE
 　　　　　　obj.currentStyle[attr];
          return obj.currentStyle[attr];
      }else{
         //非IE，
 　　　　return window.getComputedStyle(obj, null)[attr]; 
 　    }
 　 }

4. 阻止事件冒泡传播

//js阻止事件传播，这里使用click事件为例
    document.onclick=function(e){
        var e=e||window.event;
        if (e.stopPropagation) {
            e.stopPropagation();//W3C标准
        }else{
            e.cancelBubble=true;//IE....
        }
    }
    // 也可以使用try...catch...
    try{
    	e.stopPropagation()
    }catch{
    	e.cancelBubble=true;
    }

5. 阻止事件默认行为

//js阻止默认事件   一般阻止a链接href，form表单submit提交
    document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
            e.preventDefault();//W3C标准
        }else{
            e.returnValue='false';//IE..
        }
    }

6. ajax兼容问题
IE： ActiveXObject
其他： XMLHttpRequest

if(window.XMLHttpRequest){
	oAjax = new XMLHttpRequest();				
	//alert(new XMLHttpRequest());
}else{
	//只支持IE6浏览器
	oAjax = new ActiveXObject("Microsoft.XMLHTTP");	
}

7. 获取键盘事件的键盘码的兼容性问题

document.onkeydown=function(ev){
    var e=ev||window.event;
    var keyCode=e.keyCode||e.which;
    console.log(keyCode);
}