JavaScript的浏览器兼容问题是前端开发中一直存在的一个问题，和css兼容性一样，我们在开发过程中必须了解一些基本的兼容性处理方法，下面从以下几个方面总结下js开发常碰到的问题：1、常用的方法兼容；2、样式访问兼容； 3、DOM选取及对象引用； 4、事件处理； 5、其他兼容；6、浏览器判断。
.getYear方法：获取日期时经常用到的方法，例如 var year = new Date().getYear(); 在ie中得到的是当前年份2011，但是在Firefox中是111。 解决方法：year = year<1900?1900+year:year 或者用getFullYear方法。.Css的float属性
Js访问给定css的属性方法是：obj.style.property 但是css中个别属性和js保留字是一样的，所以在获取这些特殊的css属性时写法不同 例如获取一个对象的float属性:IE中 Obj.style.styleFloat 火狐中: Obj.style.cssFloat 解决方法：添加浏览器判断。.访问设置class属性class也是js的保留字，获取class的方法也有不同。 ie8之前版本的ie:Obj.getAttribute(“className”); ie8 ie9 以及火狐:Obj.getAttribute(“class”); setAttribute方法和getAttribute的方式一样。 解决方法：先判断浏览器或者使用obj.className直接设置。.对象高宽问题 火狐中如果将一个对象的height属性值赋给另一个对象的height样式，obj.style.height=imgObj.height这种写法是无法识别的，这个问题在使用对象的clientHeight和clientWidth属性时也会遇到。 解决方法：obj.style.height=imgobj.height+”px” 在给样式赋值时后面加上px。.集合对象访问Ie下可以使用()或[]获取集合类对象，火狐只能用[]。 Alert(document.forms(“formName”)) 火狐无法识别，Alert(document.forms[“formName”]) 都可以识别。 处理方式：使用[]获取。.Iframe引用ie可以通过id或者name访问这个iframe的window对象，但是火狐只能通过name访问。 解决方法：统一用name获取iframe对象或者使用document.getElementById(“frameId”)获取。 例如 alert(window.fr2); //火狐得不到 alert(window.fr1); //都能得到.获取父节点ie中支持parentElement和parentNode，火狐中只能用parentNode获取。 解决方法：统一用parentNode获取，obj.parentNode.childNodes获取子节点<ul id="ul" ><li>1</li><li>2</li><li>3</li> </ul> 火狐得到长度是7 ie是3。解决方法：使用jQuery或者在通过nodeName==“#text”在循环中把文本节点剔除如下：var ch=document.getElementById("ul").childNodes;for(i= 0;i .if(ch[i].nodeName=="#text"){ if(ch[i].nodeName=="#text"){ alert("文本节点");continue; }alert("每一个li节点我会弹出一次");}.节点操作removeChild和removeNode，removeNode()参数为false或者true。 false：只删除本身 true：删除本身以及下属节点 在火狐中没有removeNode方法，只能通过removeChild方法代替。 解决方法：用removeChild实现删除节点的效果或者用jQuery的方法如下
< ul id="ul" >< li>1< /li>< li>2< /li>< li>3< /li> </ul> var ul= document.getElementById("ul"); ul.removeNode(true);//ie删除方法 ul.parentNode.removeChild(ul);//火狐删除方法 .innerText的用法 innerText获取节点内的文本吗，ie中正常，火狐中不识别火狐中使用的是textContent。解决方法：判断浏览器或者使用jQuery
.Window.event事件对象 ie中可以获取，火狐中无法获取Function test1(){ alert(event);//ie存在火狐不存在 } Function test2(ev){ alert(ev);//ie存在火狐存在 } 解决方法：传递event参数给调用的方法，如下< input type="button" value="test" οnclick="testEvent(event)" / >function testEvent(eventTa){ var e = eventTa||window.event;var srcElement= e.srcElement||e.target;} 其中e.srcElement是id获取事件源对象，e.target是火狐获取事件源对象varsrcElement=e.srcElement||e.target;是兼容写法。.offsetX offsetY获取鼠标当前坐标，包含滚动 火狐不支持。 解决方法： 用layerX和layerY替代，效果一样。.Event.X和event.Y获取鼠标当前坐标，不包含滚动 火狐不支持。 解决方法：用pageX和pageY代替。.捕获键盘值ie中event.keyCode获取 火狐中用event.which获取。如下： function testEvent(eventTa){ //获取时间对象 vare = eventTa||window.event; //获取事件源对象 varsrcElement= e.srcElement||e.target; //获取按键对象 varkey = e.which||e.keyCode; //如果同时按下ctrl和回车键则进入 if(e.ctrlKey&&(key==13)){ alert("ctrl+enter"); } }.鼠标位置，事件对象综合示例:< input style="height:20px;width:130px;border:1px solid #000;" οnclick="caTest(event,this)" / >function caTest(eventTa,obj){ //如果tip对象已经存在，则情况其内容，并且删除该对象 if(document.getElementById("tip")){ //如果tip对象已经存在，则情况其内容，并且删除该对象 if(document.getElementById("tip")){ document.getElementById("tip").innerHTML=""; if(navigator.userAgent.indexOf(“MSIE”)!=-1){//ie删除节点方法 document.getElementById("tip").removeNode(); }else{ //火狐 document.getElementById("tip").parentNode.removeChild(document.getElementById("tip")); } } //obj为input对象本身，这里获取input对象的坐标 varobjx= obj.offsetLeft; varobjy= obj.offsetTop; //获取事件对象和当前鼠标的位置 vare = eventTa||window.event; varx = e.pageX||e.x; vary = e.pageY||e.y; 见下页//创建一个div对象 vardiv = document.createElement("div"); div.id="tip"; //设置为绝对定位 div.style.position="absolute"; //设置div的位置，x和y是之前取得的鼠标位置 div.style.top=y+"px"; div.style.left=x+"px"; //设置div大小颜色等 div.style.border="1px solid #123"; div.style.width="200px"; div.style.height="100px"; div.style.background="#fee“; 将div对象写入body中 document.getElementById("body").appendChild(div); document.getElementById("tip").innerHTML="提示信息提示信息提示信"; }