前端常见兼容性问题以及解决方法

前端常见兼容性问题以及解决方法

市场上浏览器的种类很多，不同的浏览器内核也不同，所以对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是 js 引擎，内核更加倾向于说渲染引擎。
常见的浏览器内核分为四种：常见的浏览器内核可以分四种:Webkit、Trident、Gecko、Blink

一、CSS兼容

1.不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同

解决方案：
1.CSS里*{margin：0;padding：0;},但是性能不好
2.—般我们会引入 reset.css 样式重置；

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，所有的CSS文件开头都会用样式重置各个标签的内外补丁是0。

2、IE6双边距问题;在IE6中设置了float ，同时又设置margin,就会出现边距问题

解决方案：设置display：inline;

3、当标签的高度设置小于10px，在 IE6、IE7 中会超出自己设置的高度

解决方案：超出高度的标签设置overflow：hidden;，或者设置line-height的值小于你的设置高度

4、图片默认有间距

解决方案：使用float为 img 布局

5、IE9—下浏览器不能使用 opacity

解决方案：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6、边距重叠问题：当相邻两个元素都设置了 margin 边距时, margin将取最大值，舍弃最小值

解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow：hidden;

7、cursor:hand 显示手型在 safari上不支持

解决方案：统一使用cursor：pointer;

8、两个块级元素，父元索设置了overflow：auto；子元素设置了position：relative ;且高度大于父元素，在IE6，IF7会被隐藏而不昙溢出

解决方案：父级元素设置position：relative;

二、js兼容

1. 事件绑定

IE: dom.attachEvent();

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

标准浏览器采用事件捕获的方式对应 IE 的事件冒泡机制（即标准由最外元素至最内元素或者 IE 由最内元素到最外元素）最后标准方亦觉得 IE 这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值第三值，默认false，表示事件冒泡方式。

如果浏览器不支持addEventListener()方法，你可以使用attachEvent()方法替代。

以下实例演示了跨浏览器的解决方法：

var x = document.getElementByld ( "myBtn");
if (x.addEventListener){	//所有主流浏览器，ie9+
	x.addEventListener("click", myFunction);
}
else if (x.attachEvent){	//IE8及更早IE版本
	x.attachEvent("onclick" , myFunction);
}
1
2
3
4
5
6
7

2. event事件对象问题

document.onclick = function(ev){	//谷歌火狐的写法,IE9以上支持，往下不支持;
	var e=ev;
	console .log(e);
}
document.onclick = function(){	//谷歌和E支持,火狐不支持;
	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轴的坐标
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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

解决方法：

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

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];
	}	
}
1
2
3
4
5
6
7
8
9

5. 阻止事件冒泡传播

// js阻止事件传播，这里使用click事件为例
document.onclick = function(e){
	var e = e || window.event;
	if (e.stopPropagation){
		e.stopPropagation(); // W3C标准
	}else{
		e.cancelBubble = true; //IE....
	}
}
1
2
3
4
5
6
7
8
9

6. 阻止事件默认行为

// 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..
	}
}
1
2
3
4
5
6
7
8
9

7. ajax兼容问题
IE：ActivexObject
其他：xmlHttpReuest
在 IE6 以前不是用 XMLHttpRequest 创建的，所以我们要兼容 IE6 以前的浏览器要判断他有没有 XMLHttpRequest()

跨浏览器兼容解决方法：

window.onload = function(){
	var oBtn = document.getElementByld('btn');
	oBtn.onclick = function(){
		// 1.创建ajax对象  只支持非E6浏览器
		var oAjax = null;
		if(window.XMLHttpRequest){
			oAjax = new MLHttpRequest();
			//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("失败");
				}
			}
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31