忆风
光是知道是不够的,必须要加以应用;光是希望是不够的,非去做不可。
BlogJava
首页
新随笔
联系
聚合
管理
随笔-84 评论-56 文章-0 trackbacks-0
IE和Firefox的兼容问题
IE和Firefox的兼容问题
在E桌面
http://www.epopos.com
开发过程中总结了一些IE和Firefox的兼容问题。
1
、Event的问题
在ie中我们可以直接使用event变量,但是在firefox下由于event是局部变量,firefox下我们可以事件绑定到元素上 例如
<input type="button" onclick="doEvent (event)">
为了同时兼容ie和firefox 通常在函数种通过以下代码获得事件。
var theEvent = window.event||e;
var srcElement = theEvent.srcElement;
if (!srcElement) {
srcElement = theEvent.target;
}
2
、滤镜问题
在IE下是用.filters.alpha.opacity
在Firefox下是用.style.opacity
一般是来设置元素的透明度,所以我们一般通过以下代码来解决兼容问题
var IE = navigator.userAgent.indexOf("MSIE")>0? 1: 0;
if(IE)
{
obj.filters.alpha.opacity;
}
Else
{
obj.style.opacity;
}
3
、innerText
IE下我们经常使用innerText,但是Firefox不支持此写法,通常我们写成textContent. 它同时兼容IE和firefox,建议大家采用textContent.对于没有html标签的我们也可以采用innerHTML替代。
4
、event.srcElement
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)
5
、 parentNode替代parentElement
在IE中我可以通过obj.parentElement获得父元素,但是firex下不支持
因为firefox与IE都支持DOM,所有我们可以采用obj.parentNode来解决。
6
、
集合类对象问题
IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.
7
、
自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
8
、
eval("idName")
问题
说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.
9
、
变量名与某HTML对象ID相同的问题
说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.
10
、
const
问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
11
、
input.type
属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.
12
、
event.x
与event.y问题
说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
13
、
window.location.href
问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.
14
、
模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解 决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可 以在子窗口中使用window.opener来访问父窗口. 例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
15
、
frame
问题
以下面的frame为例:
<frame src="/xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象.
Firefox:只能使用window.frameName来访问这个frame对象.
另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
如果需要将frame中的参数传回父窗口,可以在frme中使用parent来访问父窗口。例如:parent.document.form1.filename.value="Aqing";
16
、
body
问题
Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在.
例如:
Firefox:
<body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>
IE&Firefox:
<body>
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>
17
、
事件委托方法
IE:document.body.onload = inject; //Function inject()在这之前已被实现
Firefox:document.body.onload = inject();
document.body.onload=new Function('inject()');
18
、
cursor:hand
和 cursor:pointer
firefox不支持hand,但ie支持pointer
解决方法: 统一使用pointer
19
、
FireFox
中类似 obj.style.height = imgObj.height 的语句无效
解决方法:
obj.style.height = imgObj.height + 'px';
20
、
ie,firefox
以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChile方法也不管用。
解决方法:
//向table追加一个空行:
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);
21
、
padding
问题
padding 5px 4px 3px 1px FireFox无法解释简写,必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
22
、
消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效,padding属性对FireFox有效
23
、
CSS
透明
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
24
、
CSS
圆角
IE:不支持圆角。
FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。
25
、
CSS
双线凹凸边框
IE:border:2px outset;。
FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
26
、
ie
支持document.all 而firefox 不支持
改用下面三个tag的其中一个来代替document.all
getElementsByTagName("tagName") 可以得到得到所有标签元素的集合
getElementById("idName") 可以按id得到某一元素
getElementsByName("Name") 可以得到按name属性得到某一元素
27
、firefox 中使用innerHTML 的方法
<div id="online"></div>
document.all.online.innerHTML; //这种方法在IE中可以使用,但不是标准方法
document.getElementById("online").innerHTML; //这样firefox就能使用innerHTML了
28
、eval()与window.execScript()执行脚本
IE、firerox均支持eval(),firefox不支持window.execScript()
解决:统一使用eval()
29
、
e.button
键值有别于event.button,只有3个键值而无组合键值
30
、
insertAdjacentHTML
和 insertAdjacentText
insertAdjacentHTML 和 insertAdjacentText 是IE下特有的JS,功能非常好用
可惜Firefox 没有这两东东,不过,加上下面的这段的,Firefox下也可以支持这
两个方法了
if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement)
{
HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode)
{
switch (where)
{
case 'beforeBegin':
this.parentNode.insertBefore(parsedNode,this)
break;
case 'afterBegin':
this.insertBefore(parsedNode,this.firstChild);
break;
case 'beforeEnd':
this.appendChild(parsedNode);
break;
case 'afterEnd':
if (this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling);
else this.parentNode.appendChild(parsedNode);
break;
}
}
HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr)
{
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var parsedHTML = r.createContextualFragment(htmlStr);
this.insertAdjacentElement(where,parsedHTML)
}
HTMLElement.prototype.insertAdjacentText = function (where,txtStr)
{
var parsedText = document.createTextNode(txtStr)
this.insertAdjacentElement(where,parsedText)
}
}
31
、
elementFromPoint
Ie下有elementFromPoint方法,但是firefox没有,可以重写该方法
Document.prototype.elementFromPoint = function(x, y)
{
this.addEventListener("mousemove", this.elementFromPoint__handler, false);
var event = this.createEvent("MouseEvents");
var box = this.getBoxObjectFor(this.documentElement);
var screenDelta = { x: box.screenX, y: box.screenY };
event.initMouseEvent("mousemove", true, false, this.defaultView, 0,
x + screenDelta.x, y + screenDelta.y, x, y,
false, false, false, false, 0, null);
this.dispatchEvent(event);
this.removeEventListener("mousemove", this.elementFromPoint__handler, false);
return this.elementFromPoint__target;
}
Document.prototype.elementFromPoint__handler = function (event)
{
this.elementFromPoint__target = event.explicitOriginalTarget;
if (this.elementFromPoint__target.nodetype == Node.TEXT_NODE)
this.elementFromPoint__target = this.elementFromPoint__target.parentNode;
if (this.elementFromPoint__target.nodeName.toUpperCase() == "HTML" && this.documentElement.nodeName.toUpperCase() == "HTML")
this.elementFromPoint__target = this.getElementsByTagName("BODY").item(0);
//****added this code to check for textboxes and textareas
if ( this.elementFromPoint__target.nodeName=="#document" )//possible textbox or textarea
{
rp = event.rangeParent;
alert("event.rangeParent = " + rp);
if ( event.rangeParent.nodetype == Node.TEXT_NODE )//textbox with a value
this.elementFromPoint__target = event.rangeParent.parentNode.parentNode;
else if ( event.rangeParent.nodeName == 'div' )//textbox without a value
this.elementFromPoint__target = event.rangeParent.parentNode;
}
//****end. However this cause permission denied as the rangeParent object appears to be private!
event.preventdefault();
event.stopPropagation();
}
Document.prototype.elementFromPoint__target = null;
32
、mousewheel事件
firefox 没有 mousewheel 事件。可以通过以下方法解决.
<script>
var n=0;
function mwEvent(e)
{
if (!e) e = window.event;
if ( e.wheelDelta <= 0 || e.detail > 0) { n++; }
else { n--; }
window.status=n;
}
if(document.attachEvent){
document.attachEvent("onmousewheel",mwEvent);
}else{
window.addEventListener("DOMMouseScroll", mwEvent, false);
}
</script>
33
、
IE和FireFox的鼠标滚轮事件
滚轮IE和Firefox的代码不一样:
IE是mousewheel事件,Firefox是DOMMouseScroll事件
事件属性,IE是event.wheelDelta,Firefox是event.detail
属性的方向值也不一样,IE向上滚 > 0,Firefox向下滚 > 0
//滚轮放大或缩小,基于Prototype 1.6
var scrollfunc = function(event) {
var direct = 0;
if (event.wheelDelta) {
direct = event.wheelDelta > 0 ? 1 : -1;
} else if (event.detail) {
direct = event.detail < 0 ? 1 : -1;
}
zoom(direct);
};
Event.observe(document, 'mousewheel', scrollfunc);
Event.observe(document, 'DOMMouseScroll', scrollfunc); //firefox
34
、
attachEvent
方法
attachEvent方法解释:
attachEvent有2个参数,第一个参数是事件名,第二个参数是事件触发后所响应的方法. Firefox下解决方法是
Object.prototype.attachEvent=function(method,func)
{
if(!this[method])
this[method]=func;
else
this[method]=this[method].attach(func);
}
Function.prototype.attach=function(func){
var f=this;
return function(){
f();
func();
}
}
36
、
title
替代alt
在firefox和ie尽力都用title,alt在firefox下不起作用
posted on 2008-09-15 00:53
忆风
阅读(1151)
评论(1)
编辑
收藏
所属分类:
JavaScript
评论:
#
re: IE和Firefox的兼容问题
2008-09-17 23:36 |
飞儿
不错 *_*
回复
更多评论
新用户注册
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
博客园
IT新闻
知识库
C++博客
博问
管理
相关文章:
风声JS菜单树
javascript正则表达式使用详解
用JavaScript刷新框架子页面的8种方法
IE和Firefox的兼容问题
以无法为有法;以无限为有限
<
2008年9月
>
日
一
二
三
四
五
六
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
常用链接
我的随笔
我的评论
我的参与
最新评论
留言簿
(2)
给我留言
查看公开留言
查看私人留言
随笔分类
Ajax(7)
DataBase(1)
Div & CSS(5)
English
Flex(1)
IDE(13)
Java EE(18)
Java SE(2)
JavaScript(4)
Rails&Ruby
WebService&SOA(2)
数据结构与算法(3)
武术(3)
生活感悟(13)
设计模式(2)
软件工程(6)
随笔档案
2014年8月 (3)
2010年5月 (1)
2009年12月 (1)
2009年11月 (1)
2009年10月 (2)
2009年8月 (1)
2009年2月 (1)
2009年1月 (2)
2008年12月 (12)
2008年11月 (10)
2008年10月 (11)
2008年9月 (18)
2008年8月 (21)
相册
MyPhoto
图片库
Blogroll
Anders Norås' Blog
anotherbug的博客
DBA notes
ESB zone
James Gosling's
Java夜未眠
SIMONE
wakaleo
冉翔的技术专栏
千鳥志
哥哥的Blog
成都心情
截拳道行者
林信良(良葛格)的专栏
爪哇人
臧圩人
邢红瑞的blog
邱老师的Blog
镜花水月
阿蜜果
参考手册
51chm
CSS手册
DHTML手册
HTML手册
JScript手册
MSDN
SQL手册
我的其他博客
忆风 blog
我的学习链接
Cwiki Apache Software Foundation
IBM开发者工作室
JavaWorld@TW
JAVA中文世界社区
Java堂
JAVA开源
Java开源大全
java最大交流社区
JBoss ESB Introduction (written in chinese)
jBPM3 Wiki
J道
LinuxSir
Maven权威指南
Sun 中国技术社区
w3school
XML实用大全
博客园 - 程序员的网上家园
正则表达式
满江红开源
良葛格的學習筆記
搜索
最新评论
1. re: HttpClient POST的中文编码问题[未登录]
评论内容较长,点击标题查看
--hp
2. re: IntelliJ IDEA 目录技巧[未登录]
误人子弟,哪个告诉你idea不能热部署不能自动编译的,发表文章分享值得鼓励,但是也请自己先学会了再来发表,你这样会初学者走很多弯路。
idea绝对比eclipse在用户体验方面强N多倍
--naruto
3. re: HttpClient POST的中文编码问题
对方是个玩
--阿斯蒂芬
4. re: HttpClient POST的中文编码问题
sd
--sd
5. re: HttpClient POST的中文编码问题
评论内容较长,点击标题查看
--zuidaima
阅读排行榜
1. IntelliJ IDEA 目录技巧(52819)
2. HttpClient POST的中文编码问题(44353)
3. 使用IntelliJ IDEA自动在线升级服务(8428)
4. Vibrant Ink Theme for IntelliJ IDEA(7201)
5. 1亿动态pv/天的超级数据库缓存解决方案,开源了,还有测试代码。(4077)
评论排行榜
1. 《截拳道之道-李小龙》(Tao of Jeet Kune Do - Bruce Lee)英文原著[pdf] (10)
2. HttpClient POST的中文编码问题(9)
3. 1亿动态pv/天的超级数据库缓存解决方案,开源了,还有测试代码。(8)
4. IntelliJ IDEA 目录技巧(6)
5. java面试题及答案(基础题122道,代码题19道) (3)