在搞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 代码
-
- function onEnterClick(event){
- var eventObj=(event==null) ? window.event : event;
-
- var keyCode = (eventObj.which) ? eventObj.which : eventObj.keyCode;
-
- if(keyCode == 13){
- return false;
- }else{
- return true;
- }
- }
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 代码
- function getEventElement (event){
- if(event == null){
- event = window.event;
- }
- return (event.srcElement ? event.srcElement : event.target);
- }
这里面的区别关键点:
A.event,同上面所述
B.获得对象方面,IE是event.srcElement,Firefox是event.target,Opera是两个都支持
四、获得相对坐标
js 代码
- function getLeft(obj){
- if(isMSIE){
- value = obj.style.pixelLeft;
- }else{
- value = parseInt(obj.style.left, 10);
- }
- return value;
- }
在Firefox下面没有style.pixelLeft属性,取而代之的是style.left这种parseInt的处理方法,同样的处理适用于top属性
五、透明度
js 代码
- function setOpcity(obj,value){
-
- if(isMSIE){
- obj.style.filter="alpha(opacity="+value+")";
- }else{
- obj.style.MozOpacity=value*0.01;
- }
- }
这个透明度两款浏览器显示处理方式有着很大的不同,估计再多来几种浏览器也会不同。
六、对于相对坐标的处理
js 代码
- if(dragElement.parentNode.tagName != "BODY"){
-
- dragElement.style.left = (dragElement.offsetLeft + getLeft(dragElement.parentNode)) + "px";
- dragElement.style.top = (dragElement.offsetTop + getTop(dragElement.parentNode))+ "px";
- }
请注意每行后面都加了"px"单位,由于Firefox在这方面要比IE更加严格,如果没有添加单位,Firefox就会发生错误,而在IE里面运行良好,估计国内网站对Firefox的不兼容这个问题占了相当大的比例。
分享到:
相关推荐
在网页设计中,CSS(层叠样式表)的兼容性问题常常困扰着开发者,尤其是在处理IE6.0、IE7.0与Firefox等不同浏览器之间的差异。以下是一些解决这些浏览器间CSS兼容问题的方法: 1. **DOCTYPE声明**:DOCTYPE声明会...
2. **兼容性问题**:许多现代网站和应用可能不再支持IE6.0,可能会出现显示异常或无法正常使用的情况。 3. **更新问题**:绿色版IE6.0可能无法获取微软的官方更新,因此需要用户自行寻找和应用第三方补丁以保持安全...
标题和描述均指向了一个核心议题——CSS在不同浏览器(尤其是IE6.0、IE7.0与Firefox)之间的兼容性问题。这个问题对于Web开发者来说至关重要,因为不同的浏览器可能对CSS的解析和渲染方式存在差异,导致网页在不同...
标题中的“万年历-支持IE6.0版本以上、Firefox”表明这是一个专门设计用于兼容老版本Internet Explorer(至少6.0及以上)和Firefox浏览器的万年历应用。万年历通常是一个网页组件,用于显示日历信息,包括日期、星期...
### 最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 Firefox) 在Web开发过程中,确保网站能够在不同的浏览器上正确显示是非常重要的一步。尤其在早期的Web开发时代,面对像IE6、IE7这样的浏览器,以及当时主流的...
2. **兼容性问题**:IE6.0可能与现代网站和Web技术不兼容,修复可能需要调整浏览器设置,或者使用兼容性视图来确保网站能够正常显示。 3. **故障排查**:可能需要检查浏览器的设置,如禁用不必要的加载项,确保...
2. **替代方案**:考虑使用现代浏览器,如Microsoft Edge、Google Chrome或Mozilla Firefox,它们提供了更好的安全性和性能。 3. **测试环境**:如果出于工作或学习需要,建议在隔离的虚拟机环境中安装和使用IE6,以...
<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,ie7和Firefox了"表明这个绿色版还允许用户同时使用 IE6、IE7 和 Firefox 等其他浏览器,提供了多浏览器环境的便利。最后,"很好用的哟!"是对该版本易用性和实用性的肯定。 **标签解析:** ...
4. 完成卸载后,可能需要安装其他浏览器(如Chrome、Firefox)以继续浏览互联网。 5. 虽然IEremove提供了方便,但在卸载IE6后,务必关注系统的兼容性和安全性,因为失去IE6可能意味着失去了某些网站的访问能力,...
在早期的浏览器如IE 6.0和7.0以及Firefox 2.0中,由于JavaScript和CSS的实现存在差异,使得跨浏览器的兼容性成为开发者的一大挑战。这些老版本浏览器可能不支持某些现代浏览器中的特性,例如CSS3、HTML5的新元素或...
### Firefox, IE5, IE5.5, IE6, IE7, IE8 多种浏览器兼容的问题 在早期的Web开发阶段,不同的浏览器之间存在显著的技术差异,这导致了跨浏览器兼容性问题的出现。本篇文章将针对Firefox、IE5、IE5.5、IE6、IE7以及...
本篇将深入探讨如何使用纯CSS实现一个兼容IE6、IE7及Firefox的下拉菜单。 一、CSS下拉菜单的基本结构 首先,我们需要创建HTML结构。一个简单的下拉菜单通常由一个`<ul>`元素作为主要菜单容器,每个`<li>`元素表示一...
### 知识点详解:判断火狐(Firefox)或IE浏览器 在Web开发领域,浏览器兼容性一直是开发者面临的重要问题之一。不同的浏览器对Web标准的支持程度不同,这可能导致同样的网页在不同浏览器中的显示效果存在差异。为了...
IE7.0简体中文正式版发布了,对于我等常和网页打交道的人来说... 兼容浏览器版本:IE5.0,IE5.5,IE6.0,IE7.0,Firefox1.5,FireFox2.0 CSS代码:(请注重Hack代码的顺序) 复制代码代码如下: #test{ width:300px
2. **市场份额**:在发布后的几年里,IE6的市场份额一度超过90%,但随着Firefox、Chrome等竞争者的崛起,以及安全问题和性能上的局限,其市场份额逐渐下滑。 3. **安全问题**:IE6的安全性在今天看来是相当脆弱的,...
这些技巧和解决方法有助于开发者创建兼容Firefox和IE的CSS样式,确保在不同浏览器下呈现一致的布局和样式。然而,随着现代浏览器的普及和CSS规范的统一,这些问题在新的开发项目中可能会变得不那么重要,但仍需对旧...
### CSS完美兼容IE6、IE7与Firefox的通用方法详解 在Web开发的历史长河中,浏览器兼容性一直是开发者面临的重大挑战,尤其是处理早期版本的Internet Explorer(IE6和IE7)与现代浏览器如Firefox之间的差异。本文将...
通常,这包括使用开发者工具(如Chrome DevTools或Firefox Developer Tools)进行调试,但IE6由于年代久远,可能不支持这些现代工具。因此,一个专为IE6设计的前端兼容测试工具能够提供必要的辅助,帮助开发者定位并...