Firefox和IE兼容性问题及解决方法总结


Posted in Javascript onOctober 08, 2013

在开发多语言java 网站的过程中,发现不少FF中可以正常运行的代码,可是在IE中不行,反之亦然。IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下:

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+""; 
}); 
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.查找问题

以下面的getElementByClass为例:

document.getElementByClass("classname1"); 这个功能在IE下不工作,可以用

getElementsByClassName替代,但是这个函数返回的是匹配上NodeList,而不是一个单一对象,如:

var list, index; 
list = document.getElementsByClassName("classname1"); 
for (index = 0; index < list.length; ++index) { 
list[index].setAttribute(/* ... */); 
}

诸如此类的问题,最好使用类库如 jQuery, Prototype, Google Closure, etc., 这些类库兼容所有浏览器的. 这将节省很多时间来处理这些兼容性问题。

For instance, in jQuery:

$(".home1").attr(/* ... */);

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

事件委托方法

IE:document.body.onload = inject; //Function inject()在这之前已被实现

Firefox:document.body.onload = inject();

有人说标准是:

document.body.onload=new Function('inject()');

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"; 
}

FireFox中类似 obj.style.height = imgObj.height 的语句无效

解决方法:

obj.style.height = imgObj.height + 'px';

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);

padding 问题

padding 5px 4px 3px 1px FireFox无法解释简写,

必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

消除ul、ol等列表的缩进时

样式应写成:list-style:none;margin:0px;padding:0px;

其中margin属性对IE有效,padding属性对FireFox有效

CSS透明

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。

FF:opacity:0.6。

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;。

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

结束语:

诸如此类的问题,最好使用类库如 jQuery, Prototype, Google Closure, etc., 这些类库兼容所有浏览器的. 这将节省很多时间来处理这些兼容性问题。

Javascript 相关文章推荐
JavaScript表单常用验证集合
Jan 16 Javascript
javascript qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 #Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 #Javascript
Javascript表格翻页效果的具体实现
Oct 05 #Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 #Javascript
jquery中animate动画积累的解决方法
Oct 05 #Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 #Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 #Javascript
You might like
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
PHP编程函数安全篇
2013/01/08 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
PyQt5实现简单的计算器
2020/05/30 Python
零基础小白多久能学会python
2020/06/22 Python
外贸业务员岗位职责
2013/11/24 职场文书
房产销售经理职责
2013/12/20 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
关爱留守儿童标语
2014/06/18 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
2019求职信大礼包
2019/05/15 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python