IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结

  1. 今天测试代码时,发现不少IE可以运行的ajax,但在FF中报错。   
  2. IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下:   
  3. 1.兼容firefox的 outerHTML,FF中没有outerHtml的方法。   
  4. if (window.HTMLElement) {   
  5.   HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {   
  6.         var r=this.ownerDocument.createRange();   
  7.         r.setStartBefore(this);   
  8.         var df=r.createContextualFragment(sHTML);   
  9.         this.parentNode.replaceChild(df,this);   
  10.         return sHTML;   
  11.     });   
  12.   
  13.     HTMLElement.prototype.__defineGetter__("outerHTML",function() {   
  14.      var attr;   
  15.         var attrs=this.attributes;   
  16.         var str="<"+this.tagName.toLowerCase();   
  17.         for (var i=0;i<attrs.length;i++) {   
  18.             attr=attrs[i];   
  19.             if(attr.specified)   
  20.                 str+=" "+attr.name+'="'+attr.value+'"';   
  21.         }   
  22.         if(!this.canHaveChildren)   
  23.             return str+">";   
  24.         return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";   
  25.         });   
  26.   
  27.    HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {   
  28.      switch(this.tagName.toLowerCase()) {   
  29.          case "area":   
  30.          case "base":   
  31.          case "basefont":   
  32.          case "col":   
  33.          case "frame":   
  34.          case "hr":   
  35.          case "img":   
  36.          case "br":   
  37.          case "input":   
  38.          case "isindex":   
  39.          case "link":   
  40.          case "meta":   
  41.          case "param":   
  42.          return false;   
  43.      }   
  44.      return true;   
  45.    });   
  46. }   
  47.   
  48.   
  49. 2.集合类对象问题   
  50.   
  51. 说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.   
  52. 解决方法:统一使用[]获取集合类对象.   
  53.   
  54. 3.自定义属性问题   
  55.   
  56. 说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.   
  57. 解决方法:统一通过getAttribute()获取自定义属性.   
  58.   
  59.   
  60. 4.eval("idName")问题   
  61.   
  62. 说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.   
  63. 解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.   
  64.   
  65. 5.变量名与某HTML对象ID相同的问题   
  66.   
  67. 说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。   
  68. 解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.   
  69.   
  70. 6.const问题   
  71.   
  72. 说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.   
  73. 解决方法:统一使用var关键字来定义常量.   
  74.   
  75. 7.input.type属性问题   
  76.   
  77. 说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.   
  78.   
  79. 8.window.event问题   
  80.   
  81. 说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.   
  82. 解决方法:   
  83. IE:   
  84. <input name="Button8_1" type="button" value="IE" οnclick="javascript:gotoSubmit8_1()"/>   
  85. ...   
  86. <script language="javascript">   
  87. function gotoSubmit8_1() {   
  88. ...   
  89. alert(window.event); //use window.event   
  90. ...   
  91. }   
  92. </script>   
  93. IE&Firefox:   
  94. <input name="Button8_2" type="button" value="IE" οnclick="javascript:gotoSubmit8_2(event)"/>   
  95. ...   
  96. <script language="javascript">   
  97. function gotoSubmit8_2(evt) {   
  98. ...   
  99. evt=evt?evt:(window.event?window.event:null);   
  100. alert(evt); //use evt   
  101. ...   
  102. }   
  103. </script>   
  104.   
  105. 9.event.x与event.y问题   
  106.   
  107. 说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.   
  108. 解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.   
  109.   
  110.   
  111. 10.event.srcElement问题   
  112.   
  113. 说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.   
  114. 解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.   
  115.   
  116. 11.window.location.href问题   
  117.   
  118. 说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.   
  119. 解决方法:使用window.location来代替window.location.href.   
  120.   
  121. 12.模态和非模态窗口问题   
  122.   
  123. 说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.   
  124. 解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。   
  125.   
  126. 如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如:var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";   
  127.   
  128. 13.frame问题   
  129.   
  130. 以下面的frame为例:   
  131. <frame src="xxx.html" id="frameId" name="frameName" />   
  132.   
  133. (1)访问frame对象:   
  134. IE:使用window.frameId或者window.frameName来访问这个frame对象.   
  135. Firefox:只能使用window.frameName来访问这个frame对象.   
  136. 另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.   
  137.   
  138. (2)切换frame内容:   
  139. IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.   
  140.   
  141. 如果需要将frame中的参数传回父窗口,可以在frme中使用parent来访问父窗口。例如:parent.document.form1.filename.value="Aqing";   
  142.   
  143. 14.body问题   
  144.   
  145. Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在.   
  146.   
  147. 例如:   
  148. Firefox:   
  149. <body >   
  150. <script type="text/javascript">   
  151. document.body.onclick = function(evt){   
  152. evt = evt || window.event;   
  153. alert(evt);   
  154. }   
  155. </script>   
  156. </body>   
  157. IE&Firefox:   
  158. <body >   
  159. </body>   
  160. <script type="text/javascript">   
  161. document.body.onclick = function(evt){   
  162. evt = evt || window.event;   
  163. alert(evt);   
  164. } </script>   
  165.   
  166.   
  167. 15. 事件委托方法   
  168.   
  169. IE:document.body.onload = inject; //Function inject()在这之前已被实现   
  170.   
  171. Firefox:document.body.onload = inject();   
  172.   
  173. 有人说标准是:   
  174.   
  175. document.body.οnlοad=new Function('inject()');   
  176.   
  177.   
  178. 16. firefox与IE(parentElement)的父元素的区别   
  179.   
  180. IE:obj.parentElement   
  181. firefox:obj.parentNode   
  182.   
  183. 解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.   
  184.   
  185.   
  186. 17.cursor:hand VS cursor:pointer   
  187.   
  188. firefox不支持hand,但ie支持pointer   
  189.   
  190. 解决方法: 统一使用pointer   
  191.   
  192.   
  193. 18.innerText在IE中能正常工作,但是innerText在FireFox中却不行.   
  194.   
  195. 解决方法:   
  196.   
  197. if(navigator.appName.indexOf("Explorer") > -1){   
  198.   
  199.     document.getElementById('element').innerText = "my text";   
  200.   
  201. else{   
  202.   
  203.     document.getElementById('element').textContent = "my text";   
  204.   
  205. }   
  206.   
  207.   
  208. 19. FireFox中类似 obj.style.height = imgObj.height 的语句无效   
  209.   
  210. 解决方法:   
  211.   
  212. obj.style.height = imgObj.height + 'px';   
  213.   
  214.   
  215. 20. IE,firefox以及其它浏览器对于 table 标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChile方法也不管用。   
  216.   
  217. 解决方法:   
  218.   
  219. //向table追加一个空行:   
  220. var row = otable.insertRow(-1);   
  221. var cell = document.createElement("td");   
  222. cell.innerHTML = " ";   
  223. cell.className = "XXXX";   
  224. row.appendChild(cell);   
  225.   
  226.   
  227. 21. padding 问题   
  228.   
  229. padding 5px 4px 3px 1px FireFox无法解释简写,   
  230.   
  231. 必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;   
  232.   
  233.   
  234. 22. 消除ul、ol等列表的缩进时   
  235.   
  236. 样式应写成:list-style:none;margin:0px;padding:0px;   
  237.   
  238. 其中margin属性对IE有效,padding属性对FireFox有效   
  239.   
  240.   
  241. 23. CSS透明   
  242.   
  243. IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。   
  244.   
  245. FF:opacity:0.6。   
  246.   
  247.   
  248. 24. CSS圆角   
  249.   
  250. IE:不支持圆角。   
  251.   
  252. 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;。   
  253.   
  254. 25. CSS双线凹凸边框   
  255.   
  256. IE:border:2px outset;。   
  257.   
  258. 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;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值