在搞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对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS ...
IE7.0简体中文正式版发布了,对于我等常和网页打交道的人来说... 兼容浏览器版本:IE5.0,IE5.5,IE6.0,IE7.0,Firefox1.5,FireFox2.0 CSS代码:(请注重Hack代码的顺序) 复制代码代码如下: #test{ width:300px
最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)
CSS技巧汇总---div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...).pdf
兼容 IE、FireFox、Chrome 等浏览器(对于IE 6.0的兼容问题将不做特殊维护) 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax异步加载 两种方式 支持多种事件响应及反馈 支持 Tree...
1、兼容 IE、FireFox、Chrome 等浏览器(对于IE 6.0的兼容问题将不做特殊维护) 2、在一个页面内可同时生成多个 Tree 实例 3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持...
完美兼容IE6.0,IE6.0+,Chrome,Firefox。 清爽页面,js和css完全分离。 Spring3, Struts2, Mybatis3, (也集成了Hibernate4,但本项目中没有开启)。 jQuery1.8.3及其jQuery Ui,已集成4套Theme。 完美解决项目...
在IE6,IE7,IE8,chrome谷歌浏览器6.0.472.55,FireFox火狐3.6.8下测试通过 需要说明的是,测试时间不多,所以可能测试不够详细,欢迎大家指出bug,并在我的博客发表回复:http://beinet.cn 注意:刚刚测出一个bug,请...
完美兼容IE6.0,IE6.0+,Chrome,Firefox。 清爽页面,js和css完全分离。 Spring3, Struts2, Mybatis3, (也集成了Hibernate4,但本项目中没有开启)。 jQuery1.8.3及其jQuery Ui,已集成4套Theme。 完美解决项目...
3、兼容ie6.0+, firefox1.0+, Opera9+, 4、回显选定的时间,这是很多其它日历控件没有的 5、Apache license 2.0,商业友好。可免费使用,自由修改传播,但请保留版权信息 6、用 iframe 解决 IE 中层在 select ...
3、兼容ie6.0+, firefox1.0+, Opera9,其它浏览器未测试 4、回显选定的时间,这是很多其它日历控件没有的 5、Apache license 2.0,商业友好。可免费使用,自由修改传播,但请保留版权信息 6、用 iframe 解决 IE 中层...
功能特点如下: 支持单选、多选、自定义文本、以及多种题型交叉等类型的问题 限制问卷IP范围(分为黑白两种方式) 每份问卷支持无限多个题目 ...可设置是否允许同一IP重复...兼容Firefox,IE6.0,IeE7.0等主流浏览器 ……
8.6.1 IE6.0 中固定宽度和高度的容器和内容 8.6.2 FIREFOX2.0 中的容器与内容 8.6.3 可能出现的问题和解决方法 8.7 使用:after 伪类解决浮动的问题 8.7.1 IE6.0 中的浮动元素和容器 8.7.2 FIREFOX2.0 中的浮动元素和...
浏览器:IE8+、Chrome、Firefox、Opera、Safari、各移动端浏览器 多列:1栏或2栏自由切换 WP版本:4.0+,且支持最新版本 PHP版本:支持 5.3 至 7.2 语言:中文 DUX5.2 优化版特色 新增 自动给页面的站外链接...
而在我的IE6.0下,则无此问题。 原因分析: Autocomplete插件对用户输入字符的触发自动匹配是通过”keydown”事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发”...
本资源内附使用文档,简单易用。 AspNetPager针对.NET分页控件的不足,提出了与众不同的解决.net中分页问题的方案,即将分页导航功能与数据显示功能完全独立开来,由用户...兼容性强,兼容IE6.0+及FireFox 1.5+等浏览器
竞争对手方面,Firefox 从24.35%微涨至24.59%,Safari 虽然推出了支持扩展的 5.x,但是还是从 4.77% 跌至 4.72,IE 也是从59.95%小跌至59.69%。 注意: 此版本为 谷歌浏览器(Google Chrome) 6.0.447.0 Dev 版。
完美兼容IE6.0,IE6.0+,Chrome,Firefox。 清爽页面,js和css完全分离。 Spring3, Struts2, Mybatis3, (也集成了Hibernate4,但本项目中没有开启)。 jQuery1.8.3及其jQuery Ui,已集成4套Theme。 完美解决项目根...