ie_firefox的兼容问题.docVIP

Event的问题 1、在ie中我们可以直接使用event变量，但是在firefox下由于event是局部变量，firefox下我们可以事件绑定到元素上 例如 input type=button (event) 为了同时兼容ie和firefox 通常在函数种通过以下代码获得事件。 var theEvent = window.event||e; var srcElement = theEvent.srcElement; if (!srcElement) { srcElement = theEvent.target; } 2、滤镜问题 在IE下是用.filters.alpha.opacity 在Firefox下是用.style.opacity 一般是来设置元素的透明度，所以我们一般通过以下代码来解决兼容问题 var IE = navigator.userAgent.indexOf(MSIE)0? 1: 0; if(IE) { obj.filters.alpha.opacity; } Else { obj.style.opacity; } 3、innerText IE下我们经常使用innerText，但是Firefox不支持此写法，通常我们写成textContent. 它同时兼容IE和firefox， 建议大家采用textContent.对于没有html标签的我们也可以采用innerHTML替代。 4、event.srcElement IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement 属性. 解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;) 5、 parentNode替代parentElement 在IE中我可以通过obj.parentElement获得父元素，但是firex下不支持 因为firefox与IE都支持DOM，所有我们可以采用obj.parentNode来解决。 6、集合类对象问题 IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象. 解决方法:统一使用[]获取集合类对象. 7、自定义属性问题 说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox 下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性. 8、eval(idName)问题 说明:IE下,,可以使用eval(idName)或getElementById(idName)来取得id为idName的HTML对象;Firefox下只能 使用getElementById(idName)来取得id为idName的HTML对象. 解决方法:统一用getElementById(idName)来取得id为idName的HTML对象. 9、变量名与某HTML对象ID相同的问题 说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与 HTML对象ID相同的变量名;IE下则不能。 解决方法:使用document.getElementById(idName)代替document.idName.最好不要取HTML对象ID相同的变量名, 以减少错误;在声明变量时,一律加上var,以避免歧义. 10、const问题 说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量. 解决方法:统一使用var关键字来定义常量. 11、input.type属性问题 说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写. 12、event.x与event.y问题 说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y 属性. 解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX. 13、window.location.href问题 说明:IE或者Firefox2.0.x下,可以使用window.locat