前言:
不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种,一是渲染引擎
,另一个是js 引擎
所以浏览器兼容性问题一般指:css兼容
、js兼容
css兼容
1. 不同浏览器的标签默认的margin和padding不同
CSS里 *{margin:0;padding:0;}
2.css3新属性,加浏览器前缀兼容早期浏览器
-moz-
/* 火狐浏览器 /
-webkit-
/ Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o-
/ Opera浏览器(早期) /
-ms-
/ IE */
3.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序:
L-V-H-A
4.图片默认有间距
因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用
float
是正道。
5.css hack解决浏览器兼容性
不同浏览器,识别不同的样式,csshack本身就是处理浏览器兼容的。
background-color:yellow0; 0 是留给ie8的
+background-color:pink; + ie7定了;
_background-color:orange; _专门留给神奇的ie6;
JS兼容
1. 事件绑定
`IE`: dom.attachEvent();
`标准浏览器`: dom.addEventListener(‘click',function(event){},false);
标准浏览器采用事件捕获的方式对应IE的事件冒泡机制(即标准由最外元素至最内元素或者IE由最内元素到最外元素)最后标准方亦觉得IE这方面的比较合理,所以便将事件冒泡纳入了标准,这也是
addEventListener
第三个参数的由来,而且事件冒泡作为了默认值第三值默认false,表示事件冒泡方式
。
如果
浏览器不支持
addEventListener()方法, 你可以使用 attachEvent()
方法替代。
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轴的坐标
}
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'];
4.阻止事件冒泡传播:
//js阻止事件传播,这里使用click事件为例
document.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE....
}
}
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
`其他`: xmlHttpReuest
在IE6以前不是用XMLHttpRequest创建的,所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()