日期:2014-05-17  浏览次数:20800 次

IE和Firefox浏览器下javascript、CSS兼容性研究
转载:http://blog.csdn.net/herojams/archive/2009/07/01/4311884.aspx

为了将公司的产品在IE和Firefox下达到兼容,前段时间做了如下研究。由于之前准备的就是英文文档,我也懒得再翻译成中文了,呵呵。

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


IEFirefox.js


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

2.      Assign a property “id” to HTML element if it miss “id” - 3

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

4.      Using getElementById(objId) to get a object instead of eval(objId) - 3

5.      Add <tr> between <thead>and<th> -- 4

6.      Change aRows(i).cells to aRows[i].cells - 4

7.      Using standard way to get/set customized value - 4

8.      Using standard way to remove an option. 5

9.      Firefox doesn’t support Expression in style file. 5

10.         Change the event onmouseleave() to onmouseout() - 5

11.         Change obj.fireEvent(eventname) to fireEvent(obj,eventname) - 5

12.         Don’t use the command document.readyState!="complete" - 5

13.         Don’t use window.createPopup() - 6

14.         Change document.body.scrollLeft to document.documentElement.scrollLeft 6

15.         Firefox dosen’t support filter property - 6

16.         Add a postfix ‘px’ to specify the width/height or position - 6

17.         Change style=”cursor:hander” to style=”cursor:pointer” - 7

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

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

20.         Don’t forget setting opacity for firefox - 7

21.         Have browsers IE and FireFox compatible in .css - 8


   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 bet