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 相关文章推荐
jQuery bind事件使用详解
May 05 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
Vue事件处理原理及过程详解
Mar 11 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
php简单实现数组分页的方法
2016/04/30 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
一份python入门应该看的学习资料
2018/04/11 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
大四自我鉴定范文
2013/10/06 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
质量整改通知单
2015/04/21 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers