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中匿名函数,函数直接量和闭包
May 08 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
判断访客终端类型集锦
Jun 05 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
vuejs如何配置less
Apr 25 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
Vuex的各个模块封装的实现
Jun 05 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获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
Vue项目中跨域问题解决方案
2018/06/05 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Python Process多进程实现过程
2019/10/22 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
基于Python正确读取资源文件
2020/09/14 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
一些PHP的面试题
2015/05/06 面试题
电子商务毕业生求职信
2013/11/10 职场文书
机械专业毕业生推荐信范文
2013/11/25 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
教师旷工检讨书
2015/08/15 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技