`
yueguangyuan
  • 浏览: 337121 次
  • 性别: Icon_minigender_1
  • 来自: 新加坡
社区版块
存档分类
最新评论

IE6.0 Firefox 2 兼容问题积累

阅读更多

在搞Rails网站的那段时间就一直想做个小结,一直没来得及,这里把我所遇到的IE6 和Firefox兼容性的问题做以总结,里面也涉及一些Opera的东西,但是对Opera兼容接触的少,所以只是在查资料的时候顺便提了几点。由于我对Ajax应用的使用也不是很多,以下的内容基本都是来自于我们制作的网站www.bocai188.com/forum里面的登陆框制作碰到的问题(样式仿造的JavaEye的登陆框),没想到这个登陆框还真是麻雀虽小、五脏俱全,Firefox和IE之间的问题出现了不少常见的。具体的实现代码在我的另一篇日志中记录:http://yueguangyuan.iteye.com/blog/41511 附件代码下载即可运行测试效果。


一.屏蔽用户Enter键
    ,所 以这里就有了不同的处理方法,很多页面上需要屏蔽用户采用Enter键来执行动作,尤其是Struts中,如果对一个Text框出发Enter事件并采用 Submit提交,经常会出现问题,所以可以用以下的方式将其屏蔽掉,或者对于单独Text框做一个移动焦点的动作也可以。

js 代码
  1. //键盘Enter事件屏蔽      
  2. function onEnterClick(event){      
  3.     var eventObj=(event==null) ? window.event : event;      
  4.       
  5.     var keyCode = (eventObj.which) ? eventObj.which : eventObj.keyCode;      
  6.       
  7.     if(keyCode == 13){      
  8.         return false;      
  9.     }else{      
  10.         return true;      
  11.     }      

HTML页面调用时直接使用onkeydown方法触发onEnterClick(event)即可

这样就可以屏蔽掉,主要是两个差别:

      A.event的获得方式   IE和Firefox下不同,由于IE和Opera把页面事件做为全局变量,直接用window.event就可以访问,而Firefox只有在出发事件的时候才能访问event,所以第三行代码就是针对不同浏览器获得event

      B.keycode的获得方式 (信息来源地址:http://blog.tianya.cn/blogger/post_Date.asp?BlogID=666817&idWriter=0&Key=0&month=10&year=2006) 、Opera只支持keyCode属性,当事件是keydown和keyup时,keyCode属性返回的是数字代号,当事件是keypress时返回的是unicode字符。 而Firefox为keydown和keyup事件设了keyCode属性,为keypress事件设了CharCode属性。返回的结果同IE、Opera。IE

二、判断浏览器的方式:

     这个东西在使用RIA框架之前还是满有用的,现在看来自己写这个东西麻烦、容易错,但是有助于了解IE和Firefox的差别(所以这个需要不断的积累):

    1.isMSIE = (navigator.appName == "Microsoft Internet Explorer");

    2.isFirefox= (window.event==null);

三、eventElement:

js 代码
  1. function getEventElement (event){      
  2.     if(event == null){      
  3.         event = window.event;      
  4.     }       
  5.     return (event.srcElement ? event.srcElement : event.target);      
  6. }  

       这里面的区别关键点:

       A.event,同上面所述

       B.获得对象方面,IE是event.srcElement,Firefox是event.target,Opera是两个都支持

四、获得相对坐标

js 代码
  1. function getLeft(obj){   
  2.     if(isMSIE){   
  3.       value = obj.style.pixelLeft;   
  4.     }else{   
  5.       value = parseInt(obj.style.left, 10);   
  6.     }   
  7.     return value;   
  8. }  

      在Firefox下面没有style.pixelLeft属性,取而代之的是style.left这种parseInt的处理方法,同样的处理适用于top属性

五、透明度

js 代码
  1. function setOpcity(obj,value){   
  2.     // alpha(opacity=50)仅被IE支持      
  3.     if(isMSIE){   
  4.       obj.style.filter="alpha(opacity="+value+")";   
  5.     }else{   
  6.       obj.style.MozOpacity=value*0.01;   
  7.     }   
  8. }  

     这个透明度两款浏览器显示处理方式有着很大的不同,估计再多来几种浏览器也会不同。

六、对于相对坐标的处理

js 代码
  1. if(dragElement.parentNode.tagName != "BODY"){      
  2.         // 当选中可拖动元素时,初始化拖动元素的初始位置       
  3.         dragElement.style.left = (dragElement.offsetLeft + getLeft(dragElement.parentNode)) + "px";      
  4.         dragElement.style.top = (dragElement.offsetTop + getTop(dragElement.parentNode))+ "px";      
  5.     }     
       请注意每行后面都加了"px"单位,由于Firefox在这方面要比IE更加严格,如果没有添加单位,Firefox就会发生错误,而在IE里面运行良好,估计国内网站对Firefox的不兼容这个问题占了相当大的比例。
分享到:
评论

相关推荐

    IE6.0、IE7.0 与FireFox CSS兼容的解决方法

    在网页设计中,CSS(层叠样式表)的兼容性问题常常困扰着开发者,尤其是在处理IE6.0、IE7.0与Firefox等不同浏览器之间的差异。以下是一些解决这些浏览器间CSS兼容问题的方法: 1. **DOCTYPE声明**:DOCTYPE声明会...

    绿色版IE6.0

    2. **兼容性问题**:许多现代网站和应用可能不再支持IE6.0,可能会出现显示异常或无法正常使用的情况。 3. **更新问题**:绿色版IE6.0可能无法获取微软的官方更新,因此需要用户自行寻找和应用第三方补丁以保持安全...

    CSS浏览器兼容问题整理(IE6.0、IE7.0_与_FireFox)

    标题和描述均指向了一个核心议题——CSS在不同浏览器(尤其是IE6.0、IE7.0与Firefox)之间的兼容性问题。这个问题对于Web开发者来说至关重要,因为不同的浏览器可能对CSS的解析和渲染方式存在差异,导致网页在不同...

    万年历-支持IE6.0版本以上、Firefox

    标题中的“万年历-支持IE6.0版本以上、Firefox”表明这是一个专门设计用于兼容老版本Internet Explorer(至少6.0及以上)和Firefox浏览器的万年历应用。万年历通常是一个网页组件,用于显示日历信息,包括日期、星期...

    最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)

    ### 最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 Firefox) 在Web开发过程中,确保网站能够在不同的浏览器上正确显示是非常重要的一步。尤其在早期的Web开发时代,面对像IE6、IE7这样的浏览器,以及当时主流的...

    修复ie6.0浏览器

    2. **兼容性问题**:IE6.0可能与现代网站和Web技术不兼容,修复可能需要调整浏览器设置,或者使用兼容性视图来确保网站能够正常显示。 3. **故障排查**:可能需要检查浏览器的设置,如禁用不必要的加载项,确保...

    IE6.0浏览器

    2. **替代方案**:考虑使用现代浏览器,如Microsoft Edge、Google Chrome或Mozilla Firefox,它们提供了更好的安全性和性能。 3. **测试环境**:如果出于工作或学习需要,建议在隔离的虚拟机环境中安装和使用IE6,以...

    检测低版本IE6.0并提示下载新版本IE的javascript脚本

    <a href="http://www.mozillaonline.com/">Firefox</a>/ <a href="http://www.google.com/chrome/?hl=zh-CN">Chrome</a>/ <a href="http://www.apple.com.cn/safari/">Safari</a>/ ...

    IE6.0 绿色 免安装版

    此外,"可以同时装ie6,ie7和Firefox了"表明这个绿色版还允许用户同时使用 IE6、IE7 和 Firefox 等其他浏览器,提供了多浏览器环境的便利。最后,"很好用的哟!"是对该版本易用性和实用性的肯定。 **标签解析:** ...

    IE6.0 完全卸载工具 IEremove

    4. 完成卸载后,可能需要安装其他浏览器(如Chrome、Firefox)以继续浏览互联网。 5. 虽然IEremove提供了方便,但在卸载IE6后,务必关注系统的兼容性和安全性,因为失去IE6可能意味着失去了某些网站的访问能力,...

    弹窗式日期控件兼容IE 6.0、7.0和 FF 2.0浏览器

    在早期的浏览器如IE 6.0和7.0以及Firefox 2.0中,由于JavaScript和CSS的实现存在差异,使得跨浏览器的兼容性成为开发者的一大挑战。这些老版本浏览器可能不支持某些现代浏览器中的特性,例如CSS3、HTML5的新元素或...

    Firefox, IE5, IE5.5, IE6, IE7, IE8多种浏览器兼容的问题

    ### Firefox, IE5, IE5.5, IE6, IE7, IE8 多种浏览器兼容的问题 在早期的Web开发阶段,不同的浏览器之间存在显著的技术差异,这导致了跨浏览器兼容性问题的出现。本篇文章将针对Firefox、IE5、IE5.5、IE6、IE7以及...

    纯CSS的下拉菜单,支持IE6,IE7,Firefox

    本篇将深入探讨如何使用纯CSS实现一个兼容IE6、IE7及Firefox的下拉菜单。 一、CSS下拉菜单的基本结构 首先,我们需要创建HTML结构。一个简单的下拉菜单通常由一个`<ul>`元素作为主要菜单容器,每个`<li>`元素表示一...

    判断火狐(firefox)或ie浏览器

    ### 知识点详解:判断火狐(Firefox)或IE浏览器 在Web开发领域,浏览器兼容性一直是开发者面临的重要问题之一。不同的浏览器对Web标准的支持程度不同,这可能导致同样的网页在不同浏览器中的显示效果存在差异。为了...

    css hack 兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0 浏览器兼容教程

    IE7.0简体中文正式版发布了,对于我等常和网页打交道的人来说... 兼容浏览器版本:IE5.0,IE5.5,IE6.0,IE7.0,Firefox1.5,FireFox2.0  CSS代码:(请注重Hack代码的顺序) 复制代码代码如下: #test{ width:300px

    ie6浏览器下载

    2. **市场份额**:在发布后的几年里,IE6的市场份额一度超过90%,但随着Firefox、Chrome等竞争者的崛起,以及安全问题和性能上的局限,其市场份额逐渐下滑。 3. **安全问题**:IE6的安全性在今天看来是相当脆弱的,...

    浏览器Firefox与IE在CSS样式表中的差异汇编.pdf

    这些技巧和解决方法有助于开发者创建兼容Firefox和IE的CSS样式,确保在不同浏览器下呈现一致的布局和样式。然而,随着现代浏览器的普及和CSS规范的统一,这些问题在新的开发项目中可能会变得不那么重要,但仍需对旧...

    CSS完美兼容IE6IE7FF的通用方法

    ### CSS完美兼容IE6、IE7与Firefox的通用方法详解 在Web开发的历史长河中,浏览器兼容性一直是开发者面临的重大挑战,尤其是处理早期版本的Internet Explorer(IE6和IE7)与现代浏览器如Firefox之间的差异。本文将...

    ie6单文件绿化版前端兼容测试用

    通常,这包括使用开发者工具(如Chrome DevTools或Firefox Developer Tools)进行调试,但IE6由于年代久远,可能不支持这些现代工具。因此,一个专为IE6设计的前端兼容测试工具能够提供必要的辅助,帮助开发者定位并...

Global site tag (gtag.js) - Google Analytics