浏览器兼容性问题

 

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

Css兼容性问题：

1.不同浏览器的标签默认的margin和padding不同

解决办法：可以通过设置全局样式来解决这个问题，这样所有的样式都会重置，初始值都会相同了。

             

2.css3新属性，加浏览器前缀兼容早期浏览

-moz- / 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE /

 

3.块属性标签float后，又有横行的margin的情况下，IE浏览器margin加倍的问题

设置为float的div在IE下设置的margin会加倍。这是一个IE6都存在的bug。解决方案是在这个div里面加上display:inlin.

 

4.设置较小高度标签（小于一般10px），在IE6，IE7，遨游中高度超出自己设置高度

可以通过给高出的标签设置overflow:hidden

或设置行高line-height小于你设置的高度

 

5.行内属性标签，设置display:black后采用float布局，又有横行的margin的情况下，IE6间距bug

IE6里的间距比超过设置的间距，可以通过在display:block;后面加入display:inline;display:table;

 

6.IE浏览器div最小高度和宽度的问题

加宽高，并且宽高加auto

 

7.超链接访问过hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

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

 

8.图片默认有间距

几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。
可以通过使用float属性为img布局(所有图片左浮)

 

9. css hack解决浏览器兼容性

不同浏览器，识别不同的样式，css hack本身就是处理浏览器兼容的

 

二、js兼容

1. 事件绑定

IE: dom.attachEvent();
标准浏览器： dom.addEventListener(‘click',function(event){},false);

 

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.event事件对象问题
    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;

 

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

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];

 　    }

}

 

5.阻止事件冒泡传播

//js阻止事件传播，这里使用click事件为例

    document.οnclick=function(e){

        var e=e||window.event;

        if (e.stopPropagation) {

            e.stopPropagation();//W3C标准

        }else{

            e.cancelBubble=true;//IE....  true:  不被上层元素的事件控制

        }

    }

 

6.阻止事件默认行为

//js阻止默认事件   一般阻止a链接href，form表单submit提交

    document.οnclick=function(e){

        var e=e||window.event;

        if (e.preventDefault) {

            e.preventDefault();//W3C标准

        }else{

            e.returnValue='false';//IE..  false: 不会进行判断就直接执行下去

        }

    }

 

7. ajax兼容问题

IE： ActiveXObject
其他： xmlHttpReuest

在IE6以前不是用XMLHttpRequest创建的，所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()

 跨浏览器兼容解决方案:

<script>
	window.onload = function(){
		var oBtn = document.getElementById('btn');
		oBtn.onclick = function(){
			//1.创建ajax对象
			//只支持非IE6浏览器
			var oAjax = null;
			if(window.XMLHttpRequest){
				oAjax = new XMLHttpRequest();				
				//alert(new XMLHttpRequest());
			}else{
				//只支持IE6浏览器
				oAjax = new ActiveXObject("Microsoft.XMLHTTP");	
			}
			//2.连接服务器,这里加个时间参数,每次访问地址都不一样,浏览器就不用浏览器里的缓冲了,但
			//	但服务器那端是不解析这个时间的
			oAjax.open("get","a.txt?t=" + new Date().getTime(),true);
			//3.发送
			oAjax.send(null);		
			//4.接受信息
			oAjax.onreadystatechange = function(){
				//浏览器与服务器之间的交互,进行到哪一步了,当等于4的时候,代表读取完成了
				if(oAjax.readyState==4){
					//状态码,只有等于200,代表接受完成,并且成功了
					if(oAjax.status==200){
						alert("成功" + oAjax.responseText);	
					}else{
						alert("失败");	
					}	
				}	
			};
				
		};
	};
</script>