JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结


Posted in Javascript onApril 13, 2010

1.兼容firefox的 outerHTML,FF中没有outerHtml的方法。

if (window.HTMLElement) { 
HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) { 
var r=this.ownerDocument.createRange(); 
r.setStartBefore(this); 
var df=r.createContextualFragment(sHTML); 
this.parentNode.replaceChild(df,this); 
return sHTML; 
}); 
HTMLElement.prototype.__defineGetter__("outerHTML",function() { 
var attr; 
var attrs=this.attributes; 
var str="<"+this.tagName.toLowerCase(); 
for (var i=0;i<attrs.length;i++) { 
attr=attrs[i]; 
if(attr.specified) 
str+=" "+attr.name+'="'+attr.value+'"'; 
} 
if(!this.canHaveChildren) 
return str+">"; 
return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">"; 
}); 
HTMLElement.prototype.__defineGetter__("canHaveChildren",function() { 
switch(this.tagName.toLowerCase()) { 
case "area": 
case "base": 
case "basefont": 
case "col": 
case "frame": 
case "hr": 
case "img": 
case "br": 
case "input": 
case "isindex": 
case "link": 
case "meta": 
case "param": 
return false; 
} 
return true; 
}); 
}

2.集合类对象问题
说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.
3.自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.

4.eval("idName")问题
说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.
5.变量名与某HTML对象ID相同的问题
说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.
6.const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
7.input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.
8.window.event问题
说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.
解决方法:
IE:

<input name="Button8_1" type="button" value="IE" onclick="javascript:gotoSubmit8_1()"/> 
... 
<script language="javascript"> 
function gotoSubmit8_1() { 
... 
alert(window.event); //use window.event 
... 
} 
</script>

IE&Firefox:
<input name="Button8_2" type="button" value="IE" onclick="javascript:gotoSubmit8_2(event)"/> 
... 
<script language="javascript"> 
function gotoSubmit8_2(evt) { 
... 
evt=evt?evt:(window.event?window.event:null); 
alert(evt); //use evt 
... 
} 
</script>

9.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.

10.event.srcElement问题
说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
11.window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.
12.模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
13.frame问题
以下面的frame为例:
<frame src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象.
Firefox:只能使用window.frameName来访问这个frame对象.
另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
如果需要将frame中的参数传回父窗口,可以在frme中使用parent来访问父窗口。例如:parent.document.form1.filename.value="Aqing";
14.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在.
例如:
Firefox:

<body > 
<script type="text/javascript"> 
document.body.onclick = function(evt){ 
evt = evt || window.event; 
alert(evt); 
} 
</script> 
</body>

IE&Firefox:
<body > 
</body> 
<script type="text/javascript"> 
document.body.onclick = function(evt){ 
evt = evt || window.event; 
alert(evt); 
} </script>

15. 事件委托方法
IE:document.body.onload = inject; //Function inject()在这之前已被实现
Firefox:document.body.onload = inject();
有人说标准是:
document.body.onload=new Function('inject()');

16. firefox与IE(parentElement)的父元素的区别
IE:obj.parentElement
firefox:obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.

17.cursor:hand VS cursor:pointer
firefox不支持hand,但ie支持pointer
解决方法: 统一使用pointer

18.innerText在IE中能正常工作,但是innerText在FireFox中却不行.
解决方法:

if(navigator.appName.indexOf("Explorer") > -1){ 
document.getElementById('element').innerText = "my text"; 
} else{ 
document.getElementById('element').textContent = "my text"; 
}

19. FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法:
obj.style.height = imgObj.height + 'px';

20. IE,firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChile方法也不管用。
解决方法:

//向table追加一个空行: 
var row = otable.insertRow(-1); 
var cell = document.createElement("td"); 
cell.innerHTML = " "; 
cell.className = "XXXX"; 
row.appendChild(cell);

21. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

22. 消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效,padding属性对FireFox有效

23. CSS透明
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。

24. CSS圆角
IE:不支持圆角。
FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px;。
25. CSS双线凹凸边框
IE:border:2px outset;。
FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;

这里也有一些相关的ie与firefox的兼容
ie和firefox不兼容的解决方法集合

Javascript 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
json传值以及ajax接收详解
May 24 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
JavaScript 数组运用实现代码
Apr 13 #Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 #Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 #Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 #Javascript
javascript URL编码和解码使用说明
Apr 12 #Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 #Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 #Javascript
You might like
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
PHP7新功能总结
2019/04/14 PHP
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
cookie的secure属性详解
2015/04/08 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
python re正则表达式模块(Regular Expression)
2014/07/16 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
Python中的urllib模块使用详解
2015/07/07 Python
Python快速排序算法实例分析
2017/11/29 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
python版飞机大战代码分享
2018/11/20 Python
python 命令行传入参数实现解析
2019/08/30 Python
python实现简易淘宝购物
2019/11/22 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
柏林通行证:Berlin Pass
2018/04/11 全球购物
高中自我鉴定范文
2013/11/03 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
超市开店计划书
2014/09/15 职场文书
关于运动会的广播稿
2015/08/19 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
了解Redis常见应用场景
2021/06/23 Redis
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python
Nginx如何配置根据路径转发详解
2022/07/23 Servers