Javascript在IE和FireFox中的不同表现简析


Posted in Javascript onDecember 03, 2012

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,以避免歧义.
7.input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.
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下,event对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
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.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>

15. 事件委托方法
IE:document.body.onload = inject; //Function inject()在这之前已被实现
Firefox:document.body.onload = inject();
有人说标准是:
document.body.onload=new Function('inject()');

16. firefox与IE(parentElement)的父元素的区别
IE:obj.parentElement
firefox:obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
17.innerText在IE中能正常工作,但是innerText在FireFox中却不行.
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){ 
document.getElementById('element').innerText = "my text"; 
} else{ 
document.getElementById('element').textContent = "my text"; 
}

18. FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法:
obj.style.height = imgObj.height + 'px';

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

20. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
21. 消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效,padding属性对FireFox有效
22. CSS透明
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
23. 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;。
24. 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;
25.ie支持document.all 而firefox 不支持
改用下面三个tag的其中一个来代替document.all
getElementsByTagName("tagName") 可以得到得到所有标签元素的集合
getElementById("idName") 可以按id得到某一元素
getElementsByName("Name") 可以得到按name属性得到某一元素
26、firefox 中使用innerHTML 的方法
<div id="online"></div> 
document.all.online.innerHTML; //这种方法在IE中可以使用,但不是标准方法 
document.getElementById("online").innerHTML; //这样firefox就能使用innerHTML了

27、eval()与window.execScript()执行脚本
IE、firerox均支持eval(),firefox不支持window.execScript()
解决:统一使用eval()
28、对事件处理函数的重写
解决:(例):如对document的onclick()重写,统一使用document.onclick = function(){…}
Javascript 相关文章推荐
jquery获取input的value问题说明
Aug 19 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
js+JQuery返回顶部功能如何实现
Dec 03 #Javascript
ajax异步刷新实现更新数据库
Dec 03 #Javascript
JavaScript代码复用模式实例分析
Dec 02 #Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 #Javascript
script标签属性type与language使用选择
Dec 02 #Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 #Javascript
json对象转字符串如何实现
Dec 02 #Javascript
You might like
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php获取汉字首字母的函数
2013/11/07 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
如何在PHP中使用数组
2020/06/09 PHP
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
python生成九宫格图片
2018/11/19 Python
python实现整数的二进制循环移位
2019/03/08 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
初中班主任评语
2014/04/24 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
2014年销售经理工作总结
2014/12/01 职场文书