IE6.0 Firefox 2 兼容问题积累

yueguangyuan

浏览: 337717 次
性别:
来自: 新加坡

最近访客更多访客>>

tom2139779

in355hz

MartinDon

maye123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ruby on Rails & Ajax

Firefox IE Opera 浏览器 Rails

在搞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 代码

//键盘Enter事件屏蔽
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){
// alpha(opacity=50)仅被IE支持
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的不兼容这个问题占了相当大的比例。

分享到：

Ubuntu 继续积累软件 | JUnit方案 DetachedCriteria模拟求解

2007-07-07 02:34
浏览 3055
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论