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 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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
PHP sprintf()函数用例解析
2011/05/18 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
简单了解python的内存管理机制
2019/07/08 Python
python实现数据分析与建模
2019/07/11 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
浅析Python3 pip换源问题
2020/01/06 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
洗发露广告词
2014/03/14 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
活动总结格式
2014/08/30 职场文书
优秀班主任申报材料
2014/12/16 职场文书
文明家庭事迹材料
2014/12/20 职场文书
新郎结婚保证书
2015/02/26 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
超市食品安全承诺书
2015/04/29 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python
Java 在线考试云平台的实现
2021/11/23 Java/Android
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技