市面上的浏览器种类很多,不同浏览器的内核也不同,因此各个浏览器解析网页的方式也存在一定的差异。
浏览器内核主要分为两种,一种是渲染引擎,一种是js引擎。 内核越来越倾向于说渲染引擎。
常见的浏览器内核:
常见的浏览器内核可以分为四种:Trident、Gecko、Blink、Webkit
IE浏览器Trident内核,也成为IE内核
Chrome浏览器
Webkit 内核,现为 Blink 内核
火狐浏览器
Gecko 内核,也称为 Firefox 内核
Safari 浏览器
Webkit核心
Opera浏览器
最初是自己的Presto内核,后来加入了微软的大军,从Webkit到Blink内核;
360浏览器
IE+Chrome双核
猎豹浏览器
IE+Chrome双核
百度浏览器
IE内核
QQ浏览器
Trident(兼容模式)+Webkit(高速模式)
常见兼容性问题:
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
解决方案:
不透明度:0.5;过滤器:alpha(不透明度= 50);过滤器:progid:DXImageTransform.Microsoft.Alpha(样式= 0,不透明度= 50);
6、边距重叠问题; 当两个相邻元素设置了边距线间距时,边距将取最大值,放弃最小值;
解决方案:为了防止边缘重叠html5的兼容性问题,可以将父元素下放到子元素上html5的兼容性问题,并将父元素设置为overflow:hidden;
7. Cursor:hand 显示手型在 safari 上不支持
解决办法:统一使用cursor:pointer
8、对于两个块级元素,父元素设置overflow:auto; 子元素设置为position:relative; 并且高度小于父元素,在IE6和IE7中会被隐藏而不是溢出;
解决方案:在父元素上设置position:relative
2.js兼容
1.风暴绑定
IE:dom.attachEvent();
标准浏览器:dom.addEventListener('click',function(event){},false);
标准浏览器采用风暴捕获的形式来对应IE的风暴冒泡机制(即标准从最外层元素到最内层元素或者IE从最内层元素到最外层元素)。 最后,标准方也认为IE在这方面更为合理。 因此,风暴冒泡被纳入标准,这也是addEventListener第三个参数的由来,并使用风暴冒泡作为默认值。 第三个值默认为 false,表示风暴冒泡模式。
如果浏览器不支持addEventListener()方法,您可以使用attachEvent()方法。
以下示例演示了跨浏览器解决方案:
var x = document.getElementById("myBtn");
if (x.addEventListener) { //所有主流浏览器,ie9+
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早 IE 版本
x.attachEvent("onclick", myFunction);
}
事件风暴对象问题
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轴的坐标
}
2. event.srcElement(风暴源对象)问题
IE:事件对象有srcElement属性,没有target属性;
Firefox:事件对象有 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....
}
}
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..
}
}
ajax兼容性问题
IE:ActiveXObject
发表评论