浏览器兼容问题

浏览器兼容问题

css兼容

不同浏览器的标签默认的margin和padding不同

设置默认margin：0；padding:0

在css3新属性，加浏览器前缀兼容早期浏览器

-moz- 火狐浏览器
-Webkit- safari谷歌浏览器等使用Webkit引擎的浏览器
-o- Opera浏览器（早期）
-ms- IE

js兼容

事件绑定

IE：dom.attachEvent();
标准浏览器:dom.addEventListener('click',function(event){},false);

event事件对象

事件由响应函数作为参数带过来
谷歌火狐的写法，IE9以上支持，往下不支持
doument.onclick = function(evt){
	var e = evt;
	console.log(e);
}
//谷歌和IE支持，火狐不支持
document.onClick=function(){
	var e = window.event;
	console.log(e);
}

兼容写法：
document.onClick=function(evt){//兼容写法
	var e=evt||window.event;
	var mouseX=e.clientX;//鼠标x轴的坐标
	var mouseY=e.clientY;//鼠标y轴的坐标
}