js在火狐和IE浏览器的差异
- 格式:doc
- 大小:138.50 KB
- 文档页数:22
js判断浏览器版本以及浏览器内核的⽅法本⽂实例讲述了js判断浏览器版本以及浏览器内核的⽅法。
分享给⼤家供⼤家参考。
具体实现⽅法如下:js判断是否移动端及浏览器内核var browser = {versions: function() {var u = erAgent;return {trident: u.indexOf('Trident') > -1, //IE内核presto: u.indexOf('Presto') > -1, //opera内核webKit: u.indexOf('AppleWebKit') > -1, //苹果、⾕歌内核gecko: u.indexOf('Firefox') > -1, //⽕狐内核Geckomobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //iosandroid: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //androidiPhone: u.indexOf('iPhone') > -1 , //iPhoneiPad: u.indexOf('iPad') > -1, //iPadwebApp: u.indexOf('Safari') > -1 //Safari};}()}if (browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad) { alert('移动端');}代码⼆document.write(erAgent+'<br><br>')document.write(browser.versions.trident+'<span>//ie</span> <br>')document.write(browser.versions.presto+'<span>//opera</span> <br>')document.write(browser.versions.webKit+'<span>//苹果、⾕歌内核</span> <br>')document.write(browser.versions.gecko+'<span>//⽕狐内核</span> <br>')document.write(browser.versions.mobile+'<span>//是否为移动终端</span> <br>')document.write(browser.versions.ios+'<span>//ios</span> <br>')document.write(browser.versions.android+'<span>//android</span> <br>')document.write(browser.versions.iPhone+'<span>//iPhone</span> <br>')document.write(browser.versions.iPad+'<span>//iPad</span> <br>')document.write(browser.versions.webApp+'<span>//Safari</span> <br>')if (!browser.ie && !browser.mac) {var UA = erAgent.toLowerCase().toString();//判断是不是IE内核下的⾮IE版本if ((UA.indexOf('360ee') > -1) || (UA.indexOf('360se') > -1) || (UA.indexOf('se') > -1) || (UA.indexOf('aoyou') > -1)|| (UA.indexOf('theworld') > -1) || (UA.indexOf('worldchrome') > -1) || (UA.indexOf('greenbrowser') > -1)|| (UA.indexOf('baidu') > -1) || (UA.indexOf('qqbrowser') > -1)) {//是的话切换兼容模式window.open("publicPage/point-se.aspx");}else {//不是的话,建议更换浏览器alert('建议换成IE内核的浏览器');}}else {//判断IE的版本型号if ( (browser.version == 10 && browser.ie10Compat) || (browser.version == 11 && browser.ie11Compat)) {window.open("publicPage/point.aspx");}/** @desc 判断浏览器的版本以及浏览器内核* @author wangyanling* @date 2014年7⽉4⽇*/var browser = function () {var agent = erAgent.toLowerCase(),opera = window.opera,browser = {//检测当前浏览器是否为IEie: /(msie\s|trident.*rv:)([\w.]+)/.test(agent),//检测当前浏览器是否为Operaopera: (!!opera && opera.version),//检测当前浏览器是否是webkit内核的浏览器webkit: (agent.indexOf(' applewebkit/') > -1),//检测当前浏览器是否是运⾏在mac平台下mac: (agent.indexOf('macintosh') > -1),//检测当前浏览器是否处于“怪异模式”下quirks: (patMode == 'BackCompat')};//检测当前浏览器内核是否是gecko内核browser.gecko = (navigator.product == 'Gecko' && !browser.webkit && !browser.opera && !browser.ie); var version = 0;// Internet Explorer 6.0+if (browser.ie) {var v1 = agent.match(/(?:msie\s([\w.]+))/);var v2 = agent.match(/(?:trident.*rv:([\w.]+))/);if (v1 && v2 && v1[1] && v2[1]) {version = Math.max(v1[1] * 1, v2[1] * 1);} else if (v1 && v1[1]) {version = v1[1] * 1;} else if (v2 && v2[1]) {version = v2[1] * 1;} else {version = 0;}//检测浏览器模式是否为 IE11 兼容模式browser.ie11Compat = document.documentMode == 11;//检测浏览器模式是否为 IE9 兼容模式browser.ie9Compat = document.documentMode == 9;//检测浏览器模式是否为 IE10 兼容模式browser.ie10Compat = document.documentMode == 10;//检测浏览器是否是IE8浏览器browser.ie8 = !!document.documentMode;//检测浏览器模式是否为 IE8 兼容模式browser.ie8Compat = document.documentMode == 8;//检测浏览器模式是否为 IE7 兼容模式browser.ie7Compat = ((version == 7 && !document.documentMode) || document.documentMode == 7); //检测浏览器模式是否为 IE6 模式或者怪异模式browser.ie6Compat = (version < 7 || browser.quirks);browser.ie9above = version > 8;browser.ie9below = version < 9;}// Gecko.if (browser.gecko) {var geckoRelease = agent.match(/rv:([\d\.]+)/);if (geckoRelease) {geckoRelease = geckoRelease[1].split('.');version = geckoRelease[0] * 10000 + (geckoRelease[1] || 0) * 100 + (geckoRelease[2] || 0) * 1;}}//检测当前浏览器是否为Chrome, 如果是,则返回Chrome的⼤版本号if (/chrome\/(\d+\.\d)/i.test(agent)) {browser.chrome = +RegExp[' 241'];}//检测当前浏览器是否为Safari, 如果是,则返回Safari的⼤版本号if (/(\d+\.\d)?(?:\.\d)?\s+safari\/?(\d+\.\d+)?/i.test(agent) && !/chrome/i.test(agent)) {browser.safari = +(RegExp[' 241'] || RegExp[' 242']);}// Opera 9.50+if (browser.opera)version = parseFloat(opera.version());// WebKit 522+ (Safari 3+)if (browser.webkit)version = parseFloat(agent.match(/ applewebkit\/(\d+)/)[1]); //检测当前浏览器版本号browser.version = version;return browser;}();希望本⽂所述对⼤家的javascript程序设计有所帮助。
常见软件(1)对比系列一常见浏览器对比浏览器是大家最常用的软件之一。
常见的浏览器有Internet Explorer(包括众多国产IE 内核(2)浏览器)、Firefox浏览器、Chrome浏览器、Opera 浏览器、Safari浏览器。
一、各浏览器的简要介绍及外观截图1、IE浏览器IE浏览器是微软公司(Microsoft)出品的老牌浏览器:诞生于1995年。
现在市场占有率排名第一。
我们现在一般所见的IE版本有IE6,IE7,IE8,IE9。
其中IE6开始慢慢地被淘汰,但是起占有率尤其是配置较低的旧电脑上比较高。
IE7现在并不常见,因为它与它的升级版本IE8风格外观操作习惯十分相像,所以很快被IE8取代。
IE8在功能上和兼容性(3)上都较IE7有所提升。
IE9是目前微软主推的浏览器。
2、Firefox浏览器Firefox浏览器:由Mozilla基金会(谋智网络)与开源团体共同开发的网页浏览器。
重要历史:诞生于2004年,现在更新到Firefox 3.6版本。
现在市场占有率排名第二。
火狐浏览器以其丰富多彩的插件(Add-on)著称,并以此给使用者巨大的便利。
3、Chrome浏览器Chrome浏览器是谷歌公司(Google)推出的一款浏览器。
诞生于2009年,现在最新版本为Chrome 10.0.X诞生之初,Chrome 就突出一个特点:快。
尤其在与IE8的对比中,其速度占明显优势,并迫使微软投入大量精力研发IE9.并且其在可视面积,书签及扩展应用的同步上做的相当不错。
Chrome是近年来增长速度最快的浏览器。
4、Safari浏览器Safari浏览器是苹果公司(Apple)推出的浏览器,其起初只有Mac版本,在2007年发布了Windows版本,现在最新版本为Safar I for windows 5.0.x。
5、Opera浏览器Opera浏览器是由挪威欧普拉软件公司(Opera Software ASA)制造的一款浏览器。
JavaScript中的浏览器兼容性问题与解决方案在开发网页时,经常会遇到JavaScript的浏览器兼容性问题。
由于不同的浏览器对JavaScript的解释和支持程度不同,开发者需要注意这些差异,以确保网页在不同浏览器上正常运行。
本文将介绍一些常见的浏览器兼容性问题,并提供相应的解决方案。
一、DOM操作差异DOM(Document Object Model)是JavaScript操作网页内容的重要接口。
然而,不同浏览器对DOM的实现方式会存在差异,导致相同的DOM操作在不同浏览器上产生不同的效果或错误。
解决方案:1. 使用适配器模式:使用工具函数或库来封装DOM操作,例如jQuery等。
这些封装库会处理浏览器兼容性问题,使得开发者无需关心具体的差异。
2. 检测浏览器特性:通过判断浏览器特性的支持情况,选择合适的方式进行DOM操作。
可以使用Modernizr等工具来进行特性检测。
二、事件处理差异不同浏览器对事件的处理方式也存在差异。
例如,事件对象的属性、方法以及事件触发顺序等方面都可能有所不同。
解决方案:1. 使用事件库:类似于适配器模式,可以使用事件库来处理不同浏览器之间的差异。
例如,使用jQuery的事件处理方法可以保证跨浏览器的一致性。
2. 绑定事件时添加前缀:在绑定事件时,可以先针对具体的浏览器添加前缀,以修复特定浏览器的兼容性问题。
例如,`attachEvent`和`addEventListener`可以同时使用来绑定事件。
三、CSS样式差异JavaScript常用于修改网页的样式,但不同浏览器对CSS属性的解释也会有所不同,导致样式显示不一致。
解决方案:1. 使用样式库:像Bootstrap、Normalize.css等库提供了跨浏览器的CSS样式订正,可以减少不同浏览器之间的样式差异。
2. 检测浏览器前缀:对于支持特定前缀的属性,可以通过检测浏览器类型来动态添加相应的前缀。
例如,使用类似`-webkit-`和`-moz-`的前缀。
各⼤主流浏览器之间的差异任何上过⽹的⽤户对浏览器是再熟悉不过了。
只是⽤户看到仅仅只是浏览器本⾝,却很少能看到浏览器最核⼼的部分—浏览器内核。
从第⼀款libwww(Library WorldWideWeb)浏览器发展⾄今已经经历了⽆数竞争与淘汰了。
现在国内常见的浏览器有:IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等。
但⽬前最为主流浏览器有五⼤款,分别是IE、Firefox、Google Chrome、Safari、Opera。
浏览器最重要的部分是浏览器的内核。
浏览器内核是浏览器的核⼼,也称“渲染引擎”,⽤来解释⽹页语法并渲染到⽹页上。
浏览器内核决定了浏览器该如何显⽰⽹页内容以及页⾯的格式信息。
不同的浏览器内核对⽹页的语法解释也不同,因此⽹页开发者需要在不同内核的浏览器中测试⽹页的渲染效果。
对⽹页的语法解释不同渲染效果不⼀样性能不⼀样,⽀持脚本的执⾏速度等不⼀样,⽽且⽀持局部(隐藏元素等)repaint和reflow的情况⽐较复杂不⼀样1、IE浏览器:IE是微软公司旗下浏览器,是⽬国内⽤户量最多的浏览器。
IE诞⽣于1994年,当时微软为了对抗市场份额占据将近百分之九⼗的⽹景Netscape Navigator,于是在Windows中开发了⾃⼰的浏览器Internet Explorer,⾃此也引发了第⼀次浏览器⼤战。
结果可想⽽知,微软⼤获全胜,⽹景不得不将⾃⼰卖给AOL公司。
但实际上事情并没有结束,⽹景后来开发了风靡⼀时的Firefox⽕狐,⾄今Firefox也成为世界五⼤浏览器之⼀。
1996年,微软从Spyglass⼿⾥拿到Spyglass Mosaic的源代码和授权,开始开发⾃⼰的浏览器IE。
后来,微软以IE和Windows捆绑的模式不断向市场扩展份额,使IE成为市场的绝对主流。
兼,是什么!你会想到是什么,作为一个跟HMTL+CSS打交道的人来说,我只能说,我想到的只有兼容性了,兼容性自始至终困惑着许多人,例如坑爹的IE,是纵多主流浏览器中比较戳的那一个,因BUG手下纵多而闻名,家族几代问题层出不穷。
最坑爹的那个就是IE6,被纵多开发人员包括前端人员所憎恶。
却受许多企业的爱戴。
顺便说一下为什么IE6还在中国活得好好的,IE6是Windows XP中自带的一种浏览器,而Windows XP目前来说是微软开发得比较好也是比较成功的系统,使用人数多。
IE6的稳定性也比较好,目前,大多数企业特别是银行和政府的系统还是使用IE6而不愿升级也是有这方面的原因,IE6之所以盛行当然不只这一些原因,至少IE6什么时候会死那只是时间的问题罢了,在没死之前,我们得保证我们能活着。
好了,接下来来看一下一些兼容性的问题吧,这里只列出数项,日后继续完善。
1.注释引起的血案(1)在注释的时候,如果注释不当,部分浏览器会将会解析错误。
(demo1)如:<!-- 这里是注释内容-->正常显示;<!-- 这里是注释内容- ->时则在IE浏览器下正常显示,在Chrome、Firefox、Safari下不可显示。
或者->也是如此。
解决方法:在进行注释时切记不要着急,看好是否注释有问题,最好能够用VS中自带的注释,以保万无一失。
详见demo1。
(2)注释引发的血案(demo11)文字溢出:问题见demo11,test1:去掉<div style=”float:left;”></div> 中的“float:left”,就会发现多出来的字不见了,页面正常显示;同样去除<div style=”width:350px;float:right;”>中的“float:right”,多余的字也同样消失,页面正常显示。
分析:文字溢出与区块的浮动有关。
test2:把注释放到<div style=”float:left”></div>前面,多余的字消失,页面正常显示把注释放到<div style=”width:350px;float:right;”>我就只有一行字</div>后面,多余的字也同样消失,页面正常显示。
IE火狐浏览器兼容问题大全1.最简单的鼠标移过手变型的css要改了cursor:pointer;/*Firefox不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了,标准的是pointer2.Firefox不支持滤镜最常见的半透明不支持。
filter: Alpha(Opacity=50); /* for IE */opacity: .5;/* for Firefox */style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;"onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;this.filters.alpha.opacity=50"3.Firefox不支持expression 例如去掉链接的边框要分别写不同的cssa,area { blr:expression(this.onFocus=this.blur()) } /* for IE */:focus { outline: none; } /* for Firefox */4.Firefox不支持div滚动条的颜色设置,目前还没有找到替换的好方法。
.contendiv {position: absolute; left: 0px; top: 10px; width: 580px;height: 135px;line-height:120%;text-align:left; font-family:"宋体";word-break : break-all; color:#6D6E71; OVERFLOW-Y:auto;OVERFLOW-X:no;SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-TRACK-COLOR:F6F6F6;SCROLLBAR-FACE-COLOR:#F6F6F6;SCROLLBAR-SHADOW-COLOR:#F6F6 F6;SCROLLBAR-DARKSHADOW-COLOR:#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;}这个在Firefox里面完全没有效果了。
IE浏览器和火狐浏览器兼容问题.txt22真诚是美酒,年份越久越醇香浓型;真诚是焰火,在高处绽放才愈是美丽;真诚是鲜花,送之于人手有余香。
一颗孤独的心需要爱的滋润;一颗冰冷的心需要友谊的温暖;一颗绝望的心需要力量的托慰;一颗苍白的心需要真诚的帮助;一颗充满戒备关闭的门是多么需要真诚这一把钥匙打开呀!IE浏览器和火狐浏览器兼容问题——CSS篇一、css+div 样式IE与FF兼容问题汇总IE和火狐的css兼容性问题归总CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和火狐浏览器存在很大的解析差异,这里介绍一下兼容要点。
1、DOCTYPE 影响CSS 处理2、FF: div 设置margin-left, margin-right 为auto 时已经居中, IE 不行3、FF: body 设置text-align 时, div 需要设置margin: auto(主要是margin-left,margin-right) 方可居中4、FF: 设置padding 后, div 会增加height 和width, 但IE 不会, 故需要用!important 多设一个height 和width5、FF: 支持!important, IE 则忽略, 可用!important 为FF 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上6、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字,就垂直居中了。
缺点是要控制内容不要换行7、cursor: pointer 可以同时在IE FF 中显示游标手指状,hand 仅IE 可以8、FF: 链接加边框和背景色,需设置display: block, 同时设置float: left 保证不换行。
参照menubar, 给 a 和menubar 设置高度是为了避免底边显示错位, 若不设height, 可以在menubar 中插入一个空格。
火狐浏览器有哪些优点和缺点应该不少用户用过火狐浏览器,火狐浏览器是一个自由及开放源代码的网页浏览器,作为一名火狐浏览器的用户,在这边给大家介绍火狐浏览器的各种优缺点,赶紧搬好小椅子,介绍开始啦。
火狐浏览器优点1、风格简洁。
安装好火狐,打开后首页特别的骨感,看着感觉不错,有人说会有些不适应,但是有了几天,我就觉得很顺手,首页里几大网站的导航都有,方便操作。
当然,火狐也提供了大量的皮肤,可以根据自己的需要选择。
2、速度快。
这点还是很诱惑人的。
为什么相比IE等浏览器,火狐的速度也比较快呢?那是因为火狐浏览器相比IE浏览器更小巧一些,因此在占用系统资源方面相对较少。
3、安全性高。
由于很多木马病毒主要是针对IE浏览器构成威胁,而对火狐多数无效,并且火狐有大量的额外保护扩展可以提供下载,非常安全,只要把系统漏洞打好补丁,经常升级杀毒软件病毒库为最新,不去那些小网站下载东西,一般不会中毒。
4、拓展性强。
这点源于开源,就会有很多的拓展性插件,底层代码开放,让世界上成千上万的工程师给你开发软件,共同打造,有漏洞也会快速的补上。
有很多使用的扩展,下载下来使用火狐非常方便,打个比方来说你可以下载一个高级计算器软件安装在工具栏里,对于日常工作很方便,也可以定制天气预报,另外还可以安装一些小插件,实现诸如图片批量下载以及其他一些小实用功能,总的来说还是比较有个性的!火狐浏览器缺点1、网页错位。
浏览网页会出现结构不准确的状况,这是因为书写网页不规范造成的,有时可能会差点,但是个人用了一段时间感觉影响不大,调整下就OK了。
2、媒体功能不强。
火狐对在线媒体的支持并不完美,但并不是没有,只是相对来说弱一些而已。
对QQ空间和音乐支持不完全,是不完全,不是不支持,我觉得不影响使用。
补充:浏览器常见问题分析1.IE浏览器首次开机响应速度慢,需要数秒。
搞定办法:IE下选择工具-internet选项-连接-局域网设置-取消自动检测。
2. IE9图片显示不正常或干脆不显示,尤其是QQ空间搞定办法:工具-internet选项-高级-加速图形-运用软件而非GPU 选择。
常见浏览器对比常见的浏览器有Internet Explorer (IE浏览器的衍生浏览器比较多:它们以IE为内核,然后优化外观,增加部分功能。
常见的有:360浏览器、世界之窗浏览器、傲游浏览器(双内核)、搜狗浏览器(双内核)、TT浏览器。
)Firefox浏览器、Chrome浏览器、Opera 浏览器、Safari浏览器。
近日,美国著名的市场调查公司StatCounter发布了四月份全球浏览器排行榜前五名。
在全球范围内,IE排名第一,Firefox位居第二,排行三四五名的依次分别为Chrome、Safari 和Opera;在我国,IE以绝对的优势胜出位列第一,排名第二的是Chrome,三四五名则分别为 Maxthon、Firefox和Safari,它们的市场份额分别如下:全球范围内:1. IE - 44.58%2. Firefox - 29.67%3. Chrome - 18.24%4. Safari -5.05%5. Opera - 1.92%6. Other - 0.55%我国:1. IE - 87.35%2. Chrome - 4.41%3. Maxthon - 3.79%4. Firefox - 3.28%5. Safari - 0.61%6. Other - 0.56%一主流浏览器介绍1、IE浏览器IE浏览器是微软公司(Microsoft)出品的老牌浏览器:诞生于1995年。
现在市场占有率排名第一。
自2004年以来市场占有率开始下滑。
我们现在一般所见的IE版IE6,IE7,IE8,IE9。
由于最初是靠和Windows捆绑获得市场份额,且不断爆出重大安全漏洞,本身执行效率不高,不支持W3C标准,Internet Explorer一直被人诟病,但不得不承认它为互联网的发展做出了贡献。
内核:IE浏览器使用Trident的内核,该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的IE9。
浏览器介绍(常⽤浏览器,浏览器内核)⼀、浏览器介绍 浏览器是⽹页运⾏的平台,常⽤的浏览器有 IE、⽕狐(Firefox)、⾕歌(Chrome)、Safari和Opera等。
我们平时称为五⼤浏览器。
⼆、浏览器内核 1、内核介绍 (1)浏览器内核⼜可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
(2)渲染引擎它负责取得⽹页的内容(HTML、XML、图像等等)、整理讯息(例如加⼊ CSS 等),以及计算⽹页的显⽰⽅式,然后会输出⾄显⽰器或打印机。
浏览器的内核的不同对于⽹页的语法解释会有不同,所以渲染的效果也不相同。
(3)JS 引擎则是解析 Javascript 语⾔,执⾏ javascript语⾔来实现⽹页的动态效果。
(4)最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独⽴,内核就倾向于只指渲染引擎。
有⼀个⽹页标准计划⼩组制作了⼀个 ACID 来测试引擎的兼容性和性能。
2、内核的分类 浏览器的内核的种类很多,常见的浏览器内核可以分为四种:Trident、Gecko、Blink、Webkit。
(1)Trident (IE内核) 国内很多的双核浏览器的其中⼀核便是 Trident,美其名⽈ "兼容模式"。
代表: IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。
Window10 发布后,IE 将其内置浏览器命名为 Edge,Edge 最显著的特点就是新内核 EdgeHTML。
(2)Gecko(firefox) Mozilla FireFox(⽕狐浏览器) 采⽤该内核,Gecko 的特点是代码完全公开,因此,其可开发程度很⾼,全世界的程序员都可以为其编写代码,增加功能。
可惜这⼏年已经没落了,⽐如打开速度慢、升级频繁。
(3)webkit(Safari) Safari 是苹果公司开发的浏览器,所⽤浏览器内核的名称是⼤名⿍⿍的 WebKit。
js在火狐和IE浏览器的差异(摘录)以下以 IE 代替 Internet Explorer,以 MF 代替 Mozzila Firefox 1. document.form.item 问题(1)现有问题:现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行(2)解决方法:改用 document.formName.elements["elementName"](3)其它参见 22. 集合类对象问题(1)现有问题:现有代码中许多集合类对象取用时使用 (),IE 能接受,MF 不能。
(2)解决方法:改用 [] 作为下标运算。
如:document.forms("formName") 改为document.forms["formName"]。
又如:document.getElementsByName("inputName")(1) 改为document.getElementsByName("inputName")[1](3)其它3. window.event(1)现有问题:使用 window.event 无法在 MF 上运行MF 的 event 只能在事件发生的现场使用,此问题暂无法解决。
可以这样变通:原代码(可在IE中运行):<input type="button" name="someButton" value="提交"onclick="javascript:gotoSubmit()"/>...<script language="javascript">function gotoSubmit() {...alert(window.event); // use window.event...}</script>新代码(可在IE和MF中运行):<input type="button" name="someButton" value="提交"onclick="javascript:gotoSubmit(event)"/>...<script language="javascript">function gotoSubmit(evt) {evt = evt ? evt : (window.event ? window.event : null); ...alert(evt); // use evt...}</script>此外,如果新代码中第一行不改,与老代码一样的话(即 gotoSubmit 调用没有给参数),则仍然只能在IE中运行,但不会出错。
所以,这种方案 tpl 部分仍与老代码兼容。
4. HTML 对象的 id 作为对象名的问题(1)现有问题在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。
在 MF 中不能。
用 getElementById("idName") 代替 idName 作为对象变量使用。
5. 用idName字符串取得对象的问题(1)现有问题在IE中,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象,在MF 中不能。
(2)解决方法用 getElementById(idName) 代替 eval(idName)。
6. 变量名与某 HTML 对象 id 相同的问题(1)现有问题在 MF 中,因为对象 id 不作为 HTML 对象的名称,所以可以使用与 HTML 对象 id 相同的变量名,IE 中不能。
(2)解决方法在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。
此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误。
(3)其它参见问题47. event.x 与 event.y 问题(1)现有问题在IE 中,event 对象有 x, y 属性,MF中没有。
(2)解决方法在MF中,与event.x 等效的是 event.pageX。
但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。
在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别(当整个页面有滚动条的时候),不过大多数时候是等效的。
如果要完全一样,可以稍麻烦些:mX = event.x ? event.x : event.pageX;然后用 mX 代替 event.x(3)其它yerX 在 IE 与 MF 中都有,具体意义有无差别尚未试验。
8. 关于frame(1)现有问题在 IE中可以用window.testFrame取得该frame,mf中不行(2)解决方法在frame的使用方面mf和ie的最主要的区别是:如果在frame标签中书写了以下属性:<frame src="xx.htm" id="frameId" name="frameName" />那么ie可以通过id或者name访问这个frame对应的window对象而mf只可以通过name来访问这个frame对应的window对象例如如果上述frame标签写在最上层的window里面的htm里面,那么可以这样访问ie: window.top.frameId或者window.top.frameName来访问这个window对象mf:只能这样window.top.frameName来访问这个window对象另外,在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签并且可以通过window.top.document.getElementById("testFrame").src ='xx.htm'来切换frame的内容也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容9. 在mf中,自己定义的属性必须getAttribute()取得10.在mf中没有 parentElement parement.children 而用parentNode parentNode.childNodeschildNodes的下标的含义在IE和MF中不同,MF使用DOM规范,childNodes 中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。
当html中节点缺失时,IE和MF对parentNode的解释不同,例如<form><table><input/></table></form>MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点MF中节点没有removeNode方法,必须使用如下方法node.parentNode.removeChild(node)11.const 问题(1)现有问题:在 IE 中不能使用 const 关键字。
如 const constVar = 32; 在IE中这是语法错误。
(2)解决方法:不使用 const ,以 var 代替。
12. body 对象MF的body在body标签没有被浏览器完全读入之前就存在,而IE则必须在body完全被读入之后才存在13. url encoding在js中如果书写url就直接写&不要写&例如var url ='xx.jsp?objectName=xx&objectEvent=xxx';frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器一般会服务器报错参数没有找到当然如果是在tpl中例外,因为tpl中符合xml规范,要求&书写为&一般MF无法识别js中的&14. nodeName 和 tagName 问题(1)现有问题:在MF中,所有节点均有 nodeName 值,但 textNode 没有 tagName 值。
在 IE 中,nodeName 的使用好象有问题(具体情况没有测试,但我的IE已经死了好几次)。
(2)解决方法:使用 tagName,但应检测其是否为空。
15. 元素属性IE下 input.type属性为只读,但是MF下可以修改16. document.getElementsByName() 和 document.all[name] 的问题(1)现有问题:在 IE 中,getElementsByName()、document.all[name] 均不能用来取得 div 元素(是否还有其它不能取的元素还不知道)。
W3C说是一个标准,不如说是一个麻烦,FireFox大家都说好用,但我宁愿它没有!! 苦了这些程序员,哎以下细节只针对IE和FireFox,其它浏览器并未测试1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。
缺点是要控制内容不要换行7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。