市面上的浏览器种类很多，不同浏览器的内核也不同，因此各个浏览器解析网页的方式也存在一定的差异。
浏览器内核主要分为两种，一种是渲染引擎，一种是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
发表评论