1.兼容性产生的原因

市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。

2.浏览器的内核

浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。
常见的浏览器内核：
常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit
IE浏览器 Trident内核，也成为IE内核
Chrome浏览器 Webkit内核，现在是Blink内核
Firefox浏览器 Gecko内核，俗称Firefox内核
Safari浏览器 Webkit内核
Opera浏览器 最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；
360浏览器 IE+Chrome双内核
猎豹浏览器 IE+Chrome双内核
百度浏览器 IE内核
QQ浏览器 Trident（兼容模式）+Webkit（高速模式）

3.常见的兼容性问题

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案： css 里增加通配符 * { margin: 0; padding: 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、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative

各浏览器之间的差异

1.在js中修改元素background-size样式

火狐：obj.style[‘backgroundSize’]=’XXX’;

谷歌及其他：obj.style[‘background-size’]=’XXX’; 或obj.style[‘backgroundSize’]=’XXX’;

2.火狐无法再JS中操作float，需要在样式表中写。

3.360浏览器这个傻逼用useragent检测出来是chrome，但是它的内核调用却是safari，太屎了！

4.Array对象支持差异

(1)join方法

假设有一个数组：arr={‘a’,’b’,’c’}

其他浏览器：arr.join(undefind); //a,b,c

IE7:arr.join(undefind);//aundefindbundefindc

(2)indexof和lastIndexof方法

IE8及以下不支持该方法。

5.IE和FF差异

(1) window.event：

表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

(2) 获取事件源

IE用srcElement获取事件源，而FF用target获取事件源

(3) 添加，去除事件

IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)

FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

(4) 获取标签的自定义属性

IE：div1.value或div1[“value”]

FF：可用div1.getAttribute(“value”)

(5) document.getElementByName()和document.all[name]

IE；document.getElementByName()和document.all[name]均不能获取div元素

FF：可以

(6) input.type的属性

IE：input.type只读

FF：input.type可读写

(7) innerText textContent outerHTML

IE：支持innerText, outerHTML

FF：支持textContent

(8) 是否可用id代替HTML元素

IE：可以用id来代替HTML元素

FF：不可以

(9)document appendChild的问题

IE:直接document.appendChild就可以了。

FF：必须是document.body.appendChild

(10)

IE:var a=function abc(){alert(‘aa’);}; a(); abc();都会弹出aa，但是 a!=abc

FF:var a=function abc(){alert(‘aa’);}; a(); abc(); a会弹出aa，abc会提示这个函数没有定义，但是 a==abc却成立。

(11)

IE:var tt=eval; tt(‘foo=1’); 如果该eval在局部作用域中且局部作用域中有foo变量且有全局变量foo，foo就会改变这个局部foo变量的值.

FF:var tt=eval;tt(‘foo=1’); 如果该eval在局部作用域中且局部作用域中有foo变量且有全局变量foo，foo就会改变这个全局foo变量的值.

6.标签的onload支持

IE下支持标签的onreadystatechange事件而不支持onload事件，且readyState有 loading loaded complete三个值。

其余浏览器支持onload事件而不支持onreadystatechange事件

opera则都支持。

7.自定义属性支持

IE：如果是自定义属性，写在行间也是没有问题的，如

除IE内核之外的浏览器：OPERA FF CHROME 不支持行间自定义属性， 只有写在javascript里，如 ： oImg[“ff”]=1;

8.input button 标签去border后的样式

chrome:为了显示按钮的立体感，它会故意把按钮向规定的坐标下置1px

ff 和 IE 的脚本兼容问题
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
1、在 IE 下和火狐下事件冒泡不一样
//阻止冒泡的兼容性写法
function stopBubble(event){
    var e=arguments.callee.caller.arguments[0]||event;
    if(e&&e.stopPropagation){
        e.stopPropagation()
    }else if(window.event){
    	//ie
        window.event.cancelBubble=true;
    }
}


//阻止浏览器默认行为的兼容性写法
function stopDefault(event){
    var e=arguments.callee.caller.arguments[0]||event;
    //阻止默认浏览器动作(W3C)
    if(e&&e.preventDefault){
        e.preventDefault();
    }else{
        //IE中阻止函数默认动作的方式
        window.event.returnValue=false;      
    }
    return false;
}


2、IE 的写法： tbody=table.childNodes[0]
	在 FF 中，firefox 会在子节点中包含空白则第一个子节点为空白""， 而 ie 不会返回空白
	可以通过 if("" != node.nodeName)过滤掉空白子对象

3、模拟点击事件
if(document.all){ //ie 下
	document.getElementById("a3").click();
}
else{ //非 IE
	var evt = document.createEvent("MouseEvents");
	evt.initEvent("click", true, true);
	document.getElementById("a3").dispatchEvent(evt);
}

4、事件注册
if (isIE){
   window.attachEvent("onload", init);
}else{
   window.addEventListener("load", function(){})

5、ajax对象的获取
   IE： ActiveXObject
   其他浏览器：XMLHttpRequest