统一访问IE与Firefox区别
01
.IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下：
02.1 .兼容firefox的 outerHTML，FF中没有outerHtml的方法。
03 . if (window.HTMLElement) {
04 . HTMLElement.prototype.__defineSetter__( " outerHTML " , function (sHTML) {
05 . var r = this .ownerDocument.createRange();
06 . r.setStartBefore( this );
07 . var df = r.createContextualFragment(sHTML);
08 . this .parentNode.replaceChild(df, this );
09 . return sHTML;
10 . });
11 . HTMLElement.prototype.__defineGetter__( " outerHTML " , function () {
12 . var attr;
13 . var attrs = this .attributes;
14 . var str = " < " + this .tagName.toLowerCase();
15 . for ( var i = 0 ;i < attrs.length;i ++ ) {
16 . attr = attrs[i];
17 . if (attr.specified)
18 . str += " " + attr.name + ' =" ' + attr.value + ' " ' ;
19 . }
20 . if ( ! this .canHaveChildren)
21 . return str + " > " ;
22 . return str + " > " + this .innerHTML + " </ " + this .tagName.toLowerCase() + " > " ;
23 . });
24 . HTMLElement.prototype.__defineGetter__( " canHaveChildren " , function () {
25 . switch ( this .tagName.toLowerCase()) {
26 . case " area " :
27 . case " base " :
28 . case " basefont " :
29 . case " col " :
30 . case " frame " :
31 . case " hr " :
32 . case " img " :
33 . case " br " :
34 . case " input " :
35 . case " isindex " :
36 . case " link " :
37 . case " meta " :
38 . case " param " :
39 . return false ;
40 . }
41 . return true ;
42 . });
43 .}
44 .
45.2 .集合类对象问题
46 .说明:IE下,可以使用()或[]获取集合类对象;Firefox下, 只能使用[]获取集合类对象.
47 .解决方法:统一使用[]获取集合类对象.
48.3 .自定义属性问题
49 .说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用 getAttribute()获取自定义属性.
50 .解决方法:统一通过getAttribute()获取自定义属性.
51 .
52.4 .eval( " idName " ) 问题
53 .说明:IE下,,可以使用eval( " idName " )或getElementById( " idName " )来取得id为idName的HTML对象;Firefox下只能使用getElementById( " idName " )来取得id为idName的HTML对象.
54 .解决方法:统一用getElementById( " idName " )来取得id为idName的HTML对象.
55.5 .变量名与某HTML对象ID相同的问题
56 .说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下, 可以使用与HTML对象ID相同的变量名;IE下则不能。
57 .解决方法:使用document.getElementById( " idName " )代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.
58.6 .const 问题
59 .说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
60 .解决方法:统一使用var关键字来定义常量.
61.7 .input.type属性问题
62 .说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.
63.8 .window.event 问题
64 .说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的 event只能在事件发生的现场使用.
65 .解决方法:
66 .IE:
67 . < input name = " Button8_1 " type = " button " value = " IE " onclick = " javascript:gotoSubmit8_1() "/ >
68 ....
69 . < mce:script language = " javascript " ><!--
70 . function gotoSubmit8_1() {
71 ....
72 .alert(window.event); // use window.event
73 ....
74 .}
75 . // --></mce:script>
76 .IE & Firefox:
77 . < input name = " Button8_2 " type = " button " value = " IE " onclick = " javascript:gotoSubmit8_2(event) "/ >
78 ....
79 . < mce:script language = " javascript " ><!--
80 . function gotoSubmit8_2(evt) {
81 ....
82 .evt = evt ? evt:(window.event ? window.event: null );
83 .alert(evt); // use evt
84 ....
85 .}
86 . // --></mce:script>
87.9 .event.x与 event.y问题
88 .说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even 对象有pageX,pageY属性,但是没有x,y属性.
89 .解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
90 .
91.10 .event.srcElement 问题
92 .说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even 对象有target属性,但是没有srcElement属性.
93 .解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
94 .
95.12 .模态和非模态窗口问题
96 .说明:IE下, 可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
97 .解决方法:直接使用 window.open(pageURL,name,parameters)方式打开新窗口。
98 .如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如： var parWin = window.opener; parWin.document.getElementById( " Aqing " ).value = " Aqing " ;
99.13 .frame 问题
100 .以下面的frame为例：
101 . < frame src = " xxx.html " mce_src = " xxx.html " id = " frameId " name = " frameName " / >
102 .( 1 )访问frame对象:
103 .IE:使用window.frameId或者 window.frameName来访问这个frame对象.
104 .Firefox:只能使用window.frameName来访问这个frame对象.
105 .另外，在IE和Firefox中都可以使用window.document.getElementById( " frameId " )来访问这个frame对象.
106 .( 2 )切换frame内容:
107 .在IE和Firefox中都可以使用 window.document.getElementById( " testFrame " ).src = " xxx.html " 或window.frameName.location = " xxx.html " 来切换frame的内容.
108 .如果需要将frame中的参数传回父窗口，可以在frme中使用parent来访问父窗口。例如：parent.document.form1.filename.value = " Aqing " ;
109.14 .body问题
110 .Firefox的 body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在.
111 .例如：
112 .Firefox：
113 . < body >
114 . < mce:script type = " text/javascript " ><!--
115 .document.body.onclick = function (evt){
116 .evt = evt || window.event;
117 .alert(evt);
118 .}
119 . // --></mce:script>
120 . < / body>
121 .IE & Firefox：
122 . < body >
123 . < / body>
124 . < mce:script type = " text/javascript " ><!--
125 .document.body.onclick = function (evt){
126 .evt = evt || window.event;
127 .alert(evt);
128 .}
129 . // --></mce:script>
130 .
131.15 . 事件委托方法
132 .IE：document.body.onload = inject; // Function inject()在这之前已被实现
133 .Firefox：document.body.onload = inject();
134 .有人说标准是：
135 .document.body.onload = new Function( ' inject() ' );
136 .
137.16 . firefox与IE(parentElement)的父元素的区别
138 .IE：obj.parentElement
139 .firefox：obj.parentNode
140 .解决方法: 因为firefox与 IE都支持DOM,因此使用obj.parentNode是不错选择.
141 .
142.17 .cursor:hand VS cursor:pointer
143 .firefox不支持hand，但ie支持pointer
144 .解决方法: 统一使用pointer
145 .
146.18 .innerText在IE中能正常工作，但是innerText在FireFox中却不行.
147 .解决方法:
148 . if (navigator.appName.indexOf( " Explorer " ) > - 1 ){
149 . document.getElementById( ' element ' ).innerText = " my text " ;
150 .} else {
151 . document.getElementById( ' element ' ).textContent = " my text " ;
152 .}
153 .
154.19 . FireFox中类似 obj.style.height = imgObj.height 的语句无效
155 .解决方法：
156 .obj.style.height = imgObj.height + ' px ' ;
157 .
158.20 . IE,firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用。
159 .解决方法：
160 . // 向table追加一个空行：
161 . var row = otable.insertRow( - 1 );
162 . var cell = document.createElement( " td " );
163 .cell.innerHTML = " " ;
164 .cell.className = " XXXX " ;
165 .row.appendChild(cell);
166 .
167.21 . padding 问题
168 .padding 5px 4px 3px 1px FireFox无法解释简写,
169 .必须改成 padding - top:5px; padding - right:4px; padding - bottom:3px; padding - left:1px;
170 .
171.22 . 消除ul、ol等列表的缩进时
172 .样式应写成:list - style:none;margin:0px;padding:0px;
173 .其中margin属性对IE有效，padding属性对FireFox有效
174 .
175.23 . CSS透明
176 .IE：filter:progid:DXImageTransform.Microsoft.Alpha(style = 0 ,opacity = 60 )。
177 .FF：opacity: 0.6 。
178 .
179.24 . CSS圆角
180 .IE：不支持圆角。
181 .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;。
182.25 . CSS双线凹凸边框
183 .IE：border:2px outset;。
184 .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 ;
185 .
186 .注：晕，第11条居然提示非法字符，不能提交。是关于window.location的问题！
本文来自CSDN博客，转载请标明出处：http: // blog.csdn.net/longjxchina/archive/2010/12/28/6103015.aspx
02.1 .兼容firefox的 outerHTML，FF中没有outerHtml的方法。
03 . if (window.HTMLElement) {
04 . HTMLElement.prototype.__defineSetter__( " outerHTML " , function (sHTML) {
05 . var r = this .ownerDocument.createRange();
06 . r.setStartBefore( this );
07 . var df = r.createContextualFragment(sHTML);
08 . this .parentNode.replaceChild(df, this );
09 . return sHTML;
10 . });
11 . HTMLElement.prototype.__defineGetter__( " outerHTML " , function () {
12 . var attr;
13 . var attrs = this .attributes;
14 . var str = " < " + this .tagName.toLowerCase();
15 . for ( var i = 0 ;i < attrs.length;i ++ ) {
16 . attr = attrs[i];
17 . if (attr.specified)
18 . str += " " + attr.name + ' =" ' + attr.value + ' " ' ;
19 . }
20 . if ( ! this .canHaveChildren)
21 . return str + " > " ;
22 . return str + " > " + this .innerHTML + " </ " + this .tagName.toLowerCase() + " > " ;
23 . });
24 . HTMLElement.prototype.__defineGetter__( " canHaveChildren " , function () {
25 . switch ( this .tagName.toLowerCase()) {
26 . case " area " :
27 . case " base " :
28 . case " basefont " :
29 . case " col " :
30 . case " frame " :
31 . case " hr " :
32 . case " img " :
33 . case " br " :
34 . case " input " :
35 . case " isindex " :
36 . case " link " :
37 . case " meta " :
38 . case " param " :
39 . return false ;
40 . }
41 . return true ;
42 . });
43 .}
44 .
45.2 .集合类对象问题
46 .说明:IE下,可以使用()或[]获取集合类对象;Firefox下, 只能使用[]获取集合类对象.
47 .解决方法:统一使用[]获取集合类对象.
48.3 .自定义属性问题
49 .说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用 getAttribute()获取自定义属性.
50 .解决方法:统一通过getAttribute()获取自定义属性.
51 .
52.4 .eval( " idName " ) 问题
53 .说明:IE下,,可以使用eval( " idName " )或getElementById( " idName " )来取得id为idName的HTML对象;Firefox下只能使用getElementById( " idName " )来取得id为idName的HTML对象.
54 .解决方法:统一用getElementById( " idName " )来取得id为idName的HTML对象.
55.5 .变量名与某HTML对象ID相同的问题
56 .说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下, 可以使用与HTML对象ID相同的变量名;IE下则不能。
57 .解决方法:使用document.getElementById( " idName " )代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.
58.6 .const 问题
59 .说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
60 .解决方法:统一使用var关键字来定义常量.
61.7 .input.type属性问题
62 .说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.
63.8 .window.event 问题
64 .说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的 event只能在事件发生的现场使用.
65 .解决方法:
66 .IE:
67 . < input name = " Button8_1 " type = " button " value = " IE " onclick = " javascript:gotoSubmit8_1() "/ >
68 ....
69 . < mce:script language = " javascript " ><!--
70 . function gotoSubmit8_1() {
71 ....
72 .alert(window.event); // use window.event
73 ....
74 .}
75 . // --></mce:script>
76 .IE & Firefox:
77 . < input name = " Button8_2 " type = " button " value = " IE " onclick = " javascript:gotoSubmit8_2(event) "/ >
78 ....
79 . < mce:script language = " javascript " ><!--
80 . function gotoSubmit8_2(evt) {
81 ....
82 .evt = evt ? evt:(window.event ? window.event: null );
83 .alert(evt); // use evt
84 ....
85 .}
86 . // --></mce:script>
87.9 .event.x与 event.y问题
88 .说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even 对象有pageX,pageY属性,但是没有x,y属性.
89 .解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
90 .
91.10 .event.srcElement 问题
92 .说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even 对象有target属性,但是没有srcElement属性.
93 .解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
94 .
95.12 .模态和非模态窗口问题
96 .说明:IE下, 可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
97 .解决方法:直接使用 window.open(pageURL,name,parameters)方式打开新窗口。
98 .如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如： var parWin = window.opener; parWin.document.getElementById( " Aqing " ).value = " Aqing " ;
99.13 .frame 问题
100 .以下面的frame为例：
101 . < frame src = " xxx.html " mce_src = " xxx.html " id = " frameId " name = " frameName " / >
102 .( 1 )访问frame对象:
103 .IE:使用window.frameId或者 window.frameName来访问这个frame对象.
104 .Firefox:只能使用window.frameName来访问这个frame对象.
105 .另外，在IE和Firefox中都可以使用window.document.getElementById( " frameId " )来访问这个frame对象.
106 .( 2 )切换frame内容:
107 .在IE和Firefox中都可以使用 window.document.getElementById( " testFrame " ).src = " xxx.html " 或window.frameName.location = " xxx.html " 来切换frame的内容.
108 .如果需要将frame中的参数传回父窗口，可以在frme中使用parent来访问父窗口。例如：parent.document.form1.filename.value = " Aqing " ;
109.14 .body问题
110 .Firefox的 body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在.
111 .例如：
112 .Firefox：
113 . < body >
114 . < mce:script type = " text/javascript " ><!--
115 .document.body.onclick = function (evt){
116 .evt = evt || window.event;
117 .alert(evt);
118 .}
119 . // --></mce:script>
120 . < / body>
121 .IE & Firefox：
122 . < body >
123 . < / body>
124 . < mce:script type = " text/javascript " ><!--
125 .document.body.onclick = function (evt){
126 .evt = evt || window.event;
127 .alert(evt);
128 .}
129 . // --></mce:script>
130 .
131.15 . 事件委托方法
132 .IE：document.body.onload = inject; // Function inject()在这之前已被实现
133 .Firefox：document.body.onload = inject();
134 .有人说标准是：
135 .document.body.onload = new Function( ' inject() ' );
136 .
137.16 . firefox与IE(parentElement)的父元素的区别
138 .IE：obj.parentElement
139 .firefox：obj.parentNode
140 .解决方法: 因为firefox与 IE都支持DOM,因此使用obj.parentNode是不错选择.
141 .
142.17 .cursor:hand VS cursor:pointer
143 .firefox不支持hand，但ie支持pointer
144 .解决方法: 统一使用pointer
145 .
146.18 .innerText在IE中能正常工作，但是innerText在FireFox中却不行.
147 .解决方法:
148 . if (navigator.appName.indexOf( " Explorer " ) > - 1 ){
149 . document.getElementById( ' element ' ).innerText = " my text " ;
150 .} else {
151 . document.getElementById( ' element ' ).textContent = " my text " ;
152 .}
153 .
154.19 . FireFox中类似 obj.style.height = imgObj.height 的语句无效
155 .解决方法：
156 .obj.style.height = imgObj.height + ' px ' ;
157 .
158.20 . IE,firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用。
159 .解决方法：
160 . // 向table追加一个空行：
161 . var row = otable.insertRow( - 1 );
162 . var cell = document.createElement( " td " );
163 .cell.innerHTML = " " ;
164 .cell.className = " XXXX " ;
165 .row.appendChild(cell);
166 .
167.21 . padding 问题
168 .padding 5px 4px 3px 1px FireFox无法解释简写,
169 .必须改成 padding - top:5px; padding - right:4px; padding - bottom:3px; padding - left:1px;
170 .
171.22 . 消除ul、ol等列表的缩进时
172 .样式应写成:list - style:none;margin:0px;padding:0px;
173 .其中margin属性对IE有效，padding属性对FireFox有效
174 .
175.23 . CSS透明
176 .IE：filter:progid:DXImageTransform.Microsoft.Alpha(style = 0 ,opacity = 60 )。
177 .FF：opacity: 0.6 。
178 .
179.24 . CSS圆角
180 .IE：不支持圆角。
181 .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;。
182.25 . CSS双线凹凸边框
183 .IE：border:2px outset;。
184 .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 ;
185 .
186 .注：晕，第11条居然提示非法字符，不能提交。是关于window.location的问题！
本文来自CSDN博客，转载请标明出处：http: // blog.csdn.net/longjxchina/archive/2010/12/28/6103015.aspx