javascript css在IE和Firefox中区别分析


Posted in Javascript onFebruary 18, 2009

一、document.formName.item("itemName") 问题 

问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"];Firefox下,只能使用document.formName.elements["elementName"]。

解决方法:统一使用document.formName.elements["elementName"]。

二、集合类对象问题

问题说明:IE下,可以使用 () 或 [] 获取集合类对象;Firefox下,只能使用 [ ]获取集合类对象。
解决方法:统一使用 [] 获取集合类对象。

三、自定义属性问题

问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性;Firefox下,只能使用 getAttribute() 获取自定义属性。

解决方法:统一通过 getAttribute() 获取自定义属性。

四、eval("idName")问题

问题说明:IE下,可以使用 eval("idName") 或 getElementById("idName") 来取得 id 为 idName 的HTML对象;Firefox下,只能使用 getElementById("idName") 来取得 id 为 idName 的HTML对象。

解决方法:统一用 getElementById("idName") 来取得 id 为 idName 的HTML对象。

五、变量名与某HTML对象ID相同的问题

问题说明:IE下,HTML对象的ID可以作为 document 的下属对象变量名直接使用,Firefox下则不能;Firefox下,可以使用与HTML对象ID相同的变量名,IE下则不能。

解决方法:使用 document.getElementById("idName") 代替 document.idName。最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var关键字,以避免歧义。

六、const问题

问题说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量。

解决方法:统一使用var关键字来定义常量。

七、input.type属性问题

问题说明:IE下 input.type 属性为只读;但是Firefox下 input.type 属性为读写。

解决办法:不修改 input.type 属性。如果必须要修改,可以先隐藏原来的input,然后在同样的位置再插入一个新的input元素。

八、window.event问题

问题说明:window.event 只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。

解决方法:在事件发生的函数上加上event参数,在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
       示例:

<input type="button" onclick="doSomething(event)"/> 
<script language="javascript"> 
function doSomething(evt) { 
var myEvent = evt?evt:(window.event?window.event:null) 
... 
}

九、event.x与event.y问题

问题说明:IE下,even对象有x、y属性,但是没有pageX、pageY属性;Firefox下,even对象有pageX、pageY属性,但是没有x、y属性。

解决方法:var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;

如果考虑第8条问题,就改用myEvent代替event即可。

十、event.srcElement问题

问题说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。

解决方法:使用srcObj = event.srcElement ? event.srcElement : event.target;

如果考虑第8条问题,就改用myEvent代替event即可。

十一、window.location.href问题

问题说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location。

解决方法:使用 window.location 来代替 window.location.href。当然也可以考虑使用 location.replace()方法。

十二、模态和非模态窗口问题

问题说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能。

解决方法:直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。 

如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口。如果需要父窗口控制子窗口的话,使用var subWindow = window.open(pageURL,name,parameters); 来获得新开的窗口对象。

十三、frame和iframe问题

以下面的frame为例: 

<frame src="http://www.52css.com/123.html" id="frameId" name="frameName" /> 

(1)访问frame对象

IE:使用window.frameId或者window.frameName来访问这个frame对象;

Firefox:使用window.frameName来访问这个frame对象;

解决方法:统一使用 window.document.getElementById("frameId") 来访问这个frame对象;

(2)切换frame内容

在IE和Firefox中都可以使用window.document.getElementById("frameId").src = "52css.com.html"或window.frameName.location = "52css.com.html"来切换frame的内容;

如果需要将frame中的参数传回父窗口,可以在frame中使用parent关键字来访问父窗口。

十四、body载入问题

问题说明:Firefox的body对象在body标签没有被浏览器完全读入之前就存在;而IE的body对象则必须在body标签被浏览器完全读入之后才存在。

[注] 这个问题尚未实际验证,待验证后再来修改。

[注] 经验证,IE6、Opera9以及FireFox2中不存在上述问题,单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素,即使这个元素还没有载入完成。

十五、事件委托方法

问题说明:IE下,使用 document.body.onload = inject; 其中function inject()在这之前已被实现;在Firefox下,使用 document.body.onload = inject();

解决方法:统一使用 document.body.onload=new Function('inject()'); 或者 document.body.onload = function(){/* 这里是代码 */}

[注意] Function和function的区别

十六、访问的父元素的区别

问题说明:在IE下,使用 obj.parentElement 或 obj.parentNode 访问obj的父结点;在firefox下,使用 obj.parentNode 访问obj的父结点。

解决方法:因为firefox与IE都支持DOM,因此统一使用obj.parentNode 来访问obj的父结点。

十七、cursor:hand VS cursor:pointer

问题说明:firefox不支持hand,但ie支持pointer ,两者都是手形指示。

解决方法:统一使用pointer。

十八、innerText的问题.

问题说明:innerText在IE中能正常工作,但是innerText在FireFox中却不行。

解决方法:在非IE浏览器中使用textContent代替innerText。

示例:

if(navigator.appName.indexOf("Explorer") >-1){ 
document.getElementById('element').innerText = "my text"; 
} else{ 
document.getElementById('element').textContent = "my text"; 
}

[注] innerHTML 同时被ie、firefox等浏览器支持,其他的,如outerHTML等只被ie支持,最好不用。

十九、对象宽高赋值问题

问题说明:FireFox中类似 obj.style.height = imgObj.height 的语句无效。

解决方法:统一使用 obj.style.height = imgObj.height + 'px';

二十、Table操作问题

问题说明: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);

[注] 由于俺很少使用JS直接操作表格,这个问题没有遇见过。建议使用JS框架集来操作table,如JQuery。

二一、ul和ol列表缩进问题

消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px; 

其中margin属性对IE有效,padding属性对FireFox有效。← 此句表述有误,详细见↓

[注] 这个问题尚未实际验证,待验证后再来修改。

[注] 经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list-style:none才 能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

二二、CSS透明问题

IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 

FF:opacity:0.6。

[注] 最好两个都写,并将opacity属性放在下面。

二三、CSS圆角问题

IE:ie7以下版本不支持圆角。

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中的经典问题,建议使用JQuery框架集来设置圆角,让这些复杂的问题留给别人去想吧。

关于CSS中的问题实在太多了,甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。更多的知识请参考52CSS.com的文章。一个合乎发展的建议是,页面采用标准DHTML标准 编写,较少使用table,CSS定义尽量依照标准DOM,同时兼顾IE、Firefox、Opera等主流浏览器。BTW,很多情况下,FF和 Opera的CSS解释标准更贴近CSS标准,也更具有规范性。

Javascript 相关文章推荐
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
js微信分享接口调用详解
Jul 23 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 Javascript
js表数据排序 sort table data
Feb 18 #Javascript
js window.event对象详尽解析
Feb 17 #Javascript
js实现权限树的更新权限时的全选全消功能
Feb 17 #Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 #Javascript
JSON扫盲帖 JSON.as类教程
Feb 16 #Javascript
动态为事件添加js代码示例
Feb 15 #Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 #Javascript
You might like
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
php 猴子摘桃的算法
2017/06/20 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
JavaScript XML操作 封装类
2009/07/01 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
医药工作岗位求职信分享
2013/12/31 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
教育技术职业规划范文
2014/03/04 职场文书
通用自荐信范文
2014/03/14 职场文书
服装发布会策划方案
2014/05/22 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL