一、浏览器内核 五大主流浏览器：IE浏览器、Opera浏览器、Safari浏览器、Firefox浏览器、Chrome浏览器 四大内核：Trident内核(也称IE内核)、Webkit、Chrome、Blink IE浏览器内核：Trident内核，俗称IE内核 Chrome浏览器内核：统称Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核 Firefox浏览器内核：Gecko内核，俗称Firefox内核 Safari浏览器内核：Webkit内核 Opera浏览器内核：最开始是自己的Presto内核，后来是Weblit内核，现在是Blink内核 360浏览器、猎豹浏览器内核：IE + Chrome双核 QQ、搜狗、遨游浏览器内核：Trident(兼容模式) + Webkit(高速模式) 百度浏览器、世界之窗内核：IE内核 2345浏览器内核：以前是IE内核，现在是IE + Chrome双核 二、CSS兼容问题 不同浏览器标签默认的内外补丁不同 方法：CSS里{margin:0;padding:0;} 块属相标签float后，又有横向的margin情况下，IE6中会比设置的大 方法：在float的标签样式中添加display：inline;将其转化为行内属性 设置较小高度标签(一般小于10px)，在IE6、IE7、遨游中高度超出自己设置高度 方法：给超出高度的标签设置overflow:hidden，或设置行高line-height小于你设置的高度 备注：这种情况一般出现在我们设置小圆角背景的标签里。
出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。
即使你的标签是空的，这个标签的高度还是会达到默认的行高 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二种） 问题症状：IE6里的间距会超过设置的间距 方法：在display:block;后面加display:inline;display:table; 图片默认有间距 问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距 方法：使用float为img布局 备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。
去掉这个间距使用float是正道 三、js兼容 事件绑定 addEventListener()兼容Fierfox、Chrome、Safari、Opera、IE9+ attachEvent()兼容IE7、8
function click(obj,event){
if(obj.addEventListener){
obj.addEventListener(event,fn,false);
}else{
obj.attachEvent("on" + event,fn);
}
}
event事件对象 e兼容火狐浏览器，window.event兼容非火狐浏览器
document.onclick = function(e){
var e = e || window.event;
console.log(e.clientX);
}
获取scrollTop document.documentElement.scrollTop兼容非Chrome document.body.scrollTop兼容Chrome
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
阻止浏览器默认事件 eventPreventDefault()不兼容IE6-8 event.returnValue = false 兼容IE
function prevent(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
阻止冒泡 event.stopPropagation()不兼容IE6-8 event.cancleBubble = true 兼容IE
function stop(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancleBubble = true;
}
}
滚轮 obj.addEventListener(‘DOMMouseScroll’,wheel,false)兼容火狐 obj.onmousewheel = wheel;兼容非火狐
function mouseWheel(obj){
var ff = window.navigator.userAgent.indexOf('FireFox');
if(ff == -1){
obj.onmousewheel = wheel;
}else{
obj.addEventListener('DOMMouseScroll',wheel,false);
}
}
获取样式 getComputedStyle() 不兼容IE6-8，获取的是元素上所有的样式，包含所有默认样式(仅可读) currentStyle() 兼容IE，包括外联CSS文件,页面中嵌入的