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中的相等与不等运算
Apr 25 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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无法访问远程mysql的问题分析及解决
2013/05/16 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
使用jquery实现以post打开新窗口
2014/03/19 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
Python操作MySQL简单实现方法
2015/01/26 Python
python中的句柄操作的方法示例
2019/06/20 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
三个Unix的命令面试题
2015/04/12 面试题
物流业务员岗位职责
2014/02/08 职场文书
优秀护士获奖感言
2014/02/20 职场文书
聚美优品的广告词
2014/03/14 职场文书
班级团队活动方案
2014/08/14 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
2015暑假假期总结
2015/07/13 职场文书
小学生暑假生活总结
2015/07/13 职场文书
python glom模块的使用简介
2021/04/13 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL