一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子


Posted in Javascript onMay 21, 2009

1. document.formName.item("itemName") 问题
说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];
Firefox下,只能使用document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].
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只能在事件发生的现场使用. Firefox必须从源处加入event作参数传递。Ie忽略该参数,用window.event来读取该event。
解决方法:
IE&Firefox:
Submitted(event)"/> …
<script language="javascript">
function Submitted(evt) {
evt=evt?evt:(window.event?window.event:null);
}
</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下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 请同时注意event的兼容性问题。
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对象. frameId和frameName可以同名。
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中的参数传回父窗口(注意不是opener,而是parent frame),可以在frme中使用parent来访问父窗口。例如:parent.document.form1.filename.value="Aqing";
14.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在.
15. 事件委托方法
IE:document.body.onload = inject; //Function inject()在这之前已被实现
Firefox:document.body.onload = 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中却不行. 需用textContent。
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
19. FireFox中设置HTML标签的style时,所有位置性和字体尺寸的值必须后跟px。这个ie也是支持的。
20. ie,firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChild方法也不管用。
解决方法:
//向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;
26. 对select的options集合操作
枚举元素除了[]外,SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在两种浏览器上使用。注意在add后赋值元素,否则会失败(本人试验如此)。
27. XMLHTTP的区别
//mf
if (window.XMLHttpRequest) //mf
{
xmlhttp=new XMLHttpRequest()
xmlhttp.onreadystatechange=xmlhttpChange
xmlhttp.open("GET",url,true)
xmlhttp.send(null)
}
//ie
else if (window.ActiveXObject) // code for IE
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
if (xmlhttp)
{
xmlhttp.onreadystatechange=xmlhttpChange
xmlhttp.open("GET",url,true)
xmlhttp.send()
}
}
}
28. innerHTML的区别
Firefox不支持innerHTML, 解决办法可以如下
rng = document.createRange();
el = document.getElementById(elementid);
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment(content);
while (el.hasChildNodes()) //清除原有内容,加入新内容
el.removeChild(el.lastChild);
el.appendChild(htmlFrag);

Javascript 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
Javascript 兼容firefox的一些问题
May 21 #Javascript
鼠标经过的文本框textbox变色
May 21 #Javascript
jQuery 性能优化指南(3)
May 21 #Javascript
jQuery 性能优化指南(2)
May 21 #Javascript
jQuery 性能优化指南 (1)
May 21 #Javascript
javascript操作cookie_获取与修改代码
May 21 #Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 #Javascript
You might like
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
Gird事件机制初级读本
2007/03/10 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
python通过post提交数据的方法
2015/05/06 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
深入浅析Python传值与传址
2018/07/10 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
人事档案接收函
2014/01/12 职场文书
家长评语和期望
2014/02/10 职场文书
化学专业自荐信
2014/05/28 职场文书
三好生演讲稿
2014/09/12 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
关于长城的导游词
2015/01/30 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
Python实现视频自动打码的示例代码
2022/04/08 Python
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js