关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦


Posted in Javascript onAugust 28, 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只能在事件发生的现场使用.
解决方法:
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.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.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";
}

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

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

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;

Javascript 相关文章推荐
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
原生js实现轮播图特效
May 04 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 #Javascript
javascript 遍历验证所有文本框的值
Aug 27 #Javascript
JQuery 浮动导航栏实现代码
Aug 27 #Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 #Javascript
JSON 客户端和服务器端的格式转换
Aug 27 #Javascript
动态表格Table类的实现
Aug 26 #Javascript
javascript 函数调用规则
Aug 26 #Javascript
You might like
php中cookie的使用方法
2014/03/29 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
php简单图像创建入门实例
2015/06/10 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
浅析python继承与多重继承
2018/09/13 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
django教程如何自学
2020/07/31 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
优秀毕业生推荐信范文
2014/03/07 职场文书
IT工程师岗位职责
2014/07/04 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
长城导游词300字
2015/01/30 职场文书
八达岭长城导游词
2015/01/30 职场文书
支教个人总结
2015/03/04 职场文书
超市员工管理制度
2015/08/06 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL