IE和Firefox浏览器下js css的兼容性分析

首先你要在每个页面执行javascript之前引入下面这个我做好的兼容文件。

IEFirefox.js

1.      obj.firstChild/.lastChild/.nextSibling/.childNodes/.previousSibling should be changed. <!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-begin'></span></span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"> PAGEREF _Toc232938058 /h </span><span style="color:windowtext;display:none;mso-hide: screen;text-decoration:none;text-underline:none" mce_style="color:windowtext;display:none;mso-hide: screen;text-decoration:none;text-underline:none"><span style="mso-element:field-separator" mce_style="mso-element:field-separator"></span></span><![endif]-->3 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000350038000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

2.      Assign a property “id” to HTML element if it miss “id” - <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938059 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->3 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000350039000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

3.      Keep parameters case-sensitive between file.js and file.cs - <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938060 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->3 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000360030000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

4.      Using getElementById(objId) to get a object instead of eval(objId) - <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938061 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->3 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000360031000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

5.      Add <tr> between <thead>and<th> -- <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938062 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->4 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000360032000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

6.      Change aRows(i).cells to aRows[i].cells - <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938063 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->4 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000360033000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

7.      Using standard way to get/set customized value - <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938064 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->4 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000360034000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

8.      Using standard way to remove an option. <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938065 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->5 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000360035000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

9.      Firefox doesn’t support Expression in style file. <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938066 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->5 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000360036000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

10.         Change the event onmouseleave() to onmouseout() - <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938067 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->5 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000360037000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

11.         Change obj.fireEvent(eventname) to fireEvent(obj,eventname) - <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938068 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->5 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000360038000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

12.         Don’t use the command document.readyState!="complete" - <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938069 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->5 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000360039000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

13.         Don’t use window.createPopup() - <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938070 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->6 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000370030000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

14.         Change document.body.scrollLeft to document.documentElement.scrollLeft <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938071 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->6 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000370031000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

15.         Firefox dosen’t support filter property - <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938072 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->6 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000370032000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

16.         Add a postfix ‘px’ to specify the width/height or position - <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938073 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->6 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000370033000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

17.         Change style=”cursor:hander” to style=”cursor:pointer” - <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938074 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->7 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000370034000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

18.         Don’t forget propertys “title” and “alt” for img element <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938075 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->7 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000370035000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

19.         FireFox do not support the style “display:block” into <tr> -- <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938076 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->7 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000370036000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

20.         Don’t forget setting opacity for firefox - <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938077 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->7 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000370037000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

21.         Have browsers IE and FireFox compatible in .css - <!-- [if supportFields]><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'><span style="mso-element:field-begin" mce_style="mso-element:field-begin"></span></span><span style='color:windowtext;display:none;mso-hide:screen;text-decoration:none; text-underline:none'> PAGEREF _Toc232938078 /h </span><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-separator'></span></span><![endif]-->8 <!-- [if gte mso 9]><xml> <w:data>08D0C9EA79F9BACE118C8200AA004BA90B02000000080000000E0000005F0054006F0063003200330032003900330038003000370038000000</w:data> </xml><![endif]--><!-- [if supportFields]><span style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none" mce_style="color:windowtext; display:none;mso-hide:screen;text-decoration:none;text-underline:none"><span style='mso-element:field-end'></span></span><![endif]-->

 

 

1. obj.firstChild/.lastChild/.nextSibling/.childNodes/.previousSibling should be changed.

Some functions exist in IE and Firefox, but they might implement different functionality, you can change them into our predefined function in SalIEFirefox.js.

Not compatible:

var wrongGet = obj.firstChild ;

var wrongGet = obj.lastChild ;

var wrongGet = obj.nextSibling ;

var wrongGet = obj.childNodes ;

var wrongGet = obj.previousSibling ;

Compatible

var rightGet = getFirstChild (obj)

var rightGet = getLastChild (obj)

var rightGet = getNextSibling (obj)

var rightGet = getChildNodes (obj)

var rightGet = getPreviousSibling (obj)

 

1. Assign a property “id” to HTML element if it miss “id”

Add “id” for every HTML element, because if there is only “name” for HTML element, IE will assign the “name” value to “id”, but Firefox will not.

Not compatible:

tmpHtml.Append("<input type=/"text/" name=/"" + str1 + "/" value=/"0/">" );

Compatible:

tmpHtml.Append("<input type=/"text/" name=/"" + str1 + "/" id=/"" + str1 + "/" value=/"0/">" );

 

1. Keep parameters case-sensitive between file.js and file.cs

It is case-sensitive for HTML element’s id and any parameter in Firefox

Not compatible:

.js var tableDrag= document.getElementById(SectionId+"_dataTable" );

.cs       sbdTempHtml.Append("<table id=/"" + SectionId + "_datatable /">" );

Compatible:

.js var tableDrag= document.getElementById(SectionId+"_dataTable" );

.cs       sbdTempHtml.Append("<table id=/"" + SectionId + "_dataTable /">" );

 

1. Using getElementById(objId) to get a object instead of eval(objId)

Don’t use “eval” to cast a string to Object, in other words, using GetElementById(strObjId) instead of eval(strObjId)

Not compatible:

objField1 = eval ("document.mainform.meritid" + i);

Compatible:

objField1 = document.getElementById ("document.mainform.meritid" + i);

 

You should be careful of the following:

Compatible:

var objAjax = eval ("SalaryCom.CompPlanner.CppElementScripts." + document.mainform.aaa.value);

 

1. Add <tr> between <thead>and<th>

Add <tr> between <thead>and<th>, because in IE it will auto add <tr> for it, but Firefox will not. Then when you are trying to get some element using obj.parentNode() might be different.

Not compatible:

sbdTempHtml.Append("<table>" );

sbdTempHtml.Append("<thead>" );

sbdTempHtml.Append("<th width=/"100/">test field name 1</th>" );

sbdTempHtml.Append("<th width=/"200/">test field name 2</th>" );

sbdTempHtml.Append("</thead>" );

sbdTempHtml.Append("<table>" );

Compatible:

sbdTempHtml.Append("<table>" );

sbdTempHtml.Append("<thead>" );

sbdTempHtml.Append("<tr>" );

sbdTempHtml.Append("<th width=/"100/">test field name 1</th>" );

sbdTempHtml.Append("<th width=/"200/">test field name 2</th>" );

sbdTempHtml.Append("</tr>" );

sbdTempHtml.Append("</thead>" );

sbdTempHtml.Append("<table>" );

 

1. Change aRows(i).cells to aRows[i].cells

Not compatible:

aRows(i) .cells

Compatible:

aRows[i] .cells

 

1. Using standard way to get/set customized value

Using the following standard way to get/set customized value for HTML element.

 

Not compatible:

var str = Obj.customizedvalue ;

Compatible:

var str = Obj.getAttribute( “ customizedvalue ”) ;

 

1. Using standard way to remove an option.

Using the following standard way to remove an option in selected element.

Not compatible:

oSel.options.remove (oSel.selectedIndex);

Compatible:

oSel.remove (oSel.selectedIndex);

 

1. Firefox doesn’t support Expression in style file.

Not compatible:

top : expression (parentNode.parentNode.parentNode.parentNode.scrollTop) ;

width :expression (document.getElementById('CenterDIV').offsetWidth-16+'px') ;

Compatible:

        Consider to use JS method instead of using expression in css.

 

1. Change the event onmouseleave() to onmouseout()

There is no event of onmouseleave() in Firefox, you should change it to onmouseout(),but be careful to change it like following

Not compatible:

div.attachEvent("onmouseleave" ,new Function("clearPopUpMenu();" ));

Compatible:

div.attachEvent("onmouseout" ,new Function("clearPopUpMenu();" ));

 

1. Change obj.fireEvent(eventname) to fireEvent(obj,eventname)

There is no method obj.fireEvent() in Firefox, you should change it to following:

Not compatible:

div.fireEvent( "onscroll");

Compatible:

fireEvent(div, "onscroll");

 

1. Don’t use the command document.readyState!="complete"

Firefox doesn’t support this command document.readyState!="complete"

Not compatible:

              if (document.readyState!="complete" )

 

1. Don’t use window.createPopup()

Don’t use window.createPopup() method to create a popup window.

Not compatible:

           window.createPopup();

 

1. Change document.body.scrollLeft to document.documentElement.scrollLeft

There are some differences between body.scrollLeft and other HTML element(documentElement.scrollLeft), you should care about it.

Not compatible:

var _left = document.body.scrollLeft;

Compatible:

var _left = document.documentElement.scrollLeft;

      

you should be careful of the following propertys which should be also applied in:

scrollHeight|scrollLeft|scrollTop|scrollWidth

 

1. Firefox dosen’t support filter property

A file Cppu_ColorGradient.js can resolve the problem, include the file in Cppb_Header.ascx.cs and do something such as set classname and get client color and so on…

 

1. Add a postfix ‘px’ to specify the width/height or position

Not compatible:

document.GetElementById(strObjId).style.width = 10;

Compatible:

document.GetElementById(strObjId).style.width = ‘10px’;

 

you should be careful of the following propertys which should be also applied in (you can ignore if it is a read only property).

width|height|right|left|scrollHeight|scrollWidth|scrollLeft|scrollTop|offsetHeight|offsetWidth|offsetLeft|offsetTop|clientHeight|clientWidth|clientLeft|clientTop|lineHeight|lineWidth

 

1. Change style=”cursor:hander” to style=”cursor:pointer”

Not compatible:

style=”cursor:hander <!-- [if !supportAnnotations]-->[k1] <!-- [endif]-->  ”

Compatible:

style=”cursor:pointer ”

 

1. Don’t forget propertys “title” and “alt” for img element

You should assign “title” and “alt” property for img element. Because it will atuo assign “alt” value to “title” property in IE, while it will not in Firefox.

Not compatible:

sbdTempHtml.Append("<img src=/"../Graphics/i_expand.gif/" /></div>" );

Compatible:

sbdTempHtml.Append("<img alt=/"/" title=/"/" src=/"../Graphics/i_expand.gif/" /></div>" );

 

1. FireFox do not support the style “display:block” into <tr>

we are using display:block on tr tag which is not correct in Firefox. After applying display:block, the layout of the table is broken. The default style for tr in Firefox should be ‘display:table-row’

Not compatible:

document.getElementById("hrmtr" ).style.display = "block" ;

Compatible:

if (window.isIE)

document.getElementById("hrmtr" ).style.display = "block" ;

else

document.getElementById("hrmtr" ).style.display = "" ;

 

 

1. Don’t forget setting opacity for firefox

It is only applied in IE if you set opacity as “filter:alpha(opacity=50);”,

Not compatible:

filter :alpha(opacity=50) ;

Compatible:

filter :alpha(opacity=50) ;

-moz-opacity :0.5 ; /*css*/

 

/*The way in js*/

if (!window.isIE)

obj.style.MozOpacity = 0.5;

 

1. Have browsers IE and FireFox compatible in .css

If you want to have browsers IE & FireFox compatible in .css, you should copy a line and prefixed “*”, and the line must be under the original line, then Firefox is hight priority automatically, IE will ignore it and only process a line prefixed “*”.

Not compatible:

margin :10px ;

Compatible:

  margin :20px ; /*for firefox*/

  *margin :10px ;     /*for ie7,ie6 */