IE、Safari、Chrome浏览器JavaScript兼容性改造总结

1.1 浏览器内核差别
1.2. Safari和Chrome浏览器简介
Safari和Chrome，一个是苹果公司MAC OS系统的浏览器，一个是Google开发的浏览器，它们都使用了同样的内核webkit，关于webkit，有如下简介。
　　 WebKit 是一个开源浏览器网页排版引擎，与之相应的引擎有Gecko（Mozilla，Firefox 等使用的排版引擎）和Trident（也称为MSHTML，IE 使用的排版引擎）。同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称，主要用于Safari，Dashboard，Mail 和其他一些Mac OS X 程序。WebKit 所包含的 WebCore 排版引擎和 JSCore 引擎来自于 KDE 的 KHTML 和 KJS，当年苹果比较了 Gecko 和 KHTML 后，仍然选择了后者，就因为它拥有清晰的源码结构、极快的渲染速度。
　　目前使用WebKit 引擎的浏览器主要有：Safari(apple出品)，Midori，chrome(google出品)等。
1.3. 改造问题汇总
在改造过程的测试及排查中，总结排查出来的共同点一共有以下数十点：
1.2.1 document.formName.item("itemName") 问题
说明:IE下,可以使用document.formName.item("itemName")或document.formName.item["itemName"]或document.formName.elements["elementName"];
W3C标准,只能使用document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].

1.2.2 集合类对象问题
说明:IE下,可以使用()或[]获取集合类对象; Safari及Chrome下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.

1.2.3 各种style描述需严格大小写
说明:IE下，各种CSS属性大小写要求不严格，均能正确操作。
Safari及Chrome下出现过因为大小写问题无易做图确解析的情况，建议严格大小写。
解决方法：统一严格按照CSS属性大小编写。

1.2.4 自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性; 在Safari和Chrome下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
实例：<input type='text' id='comdiv' paic='it' style='display:block' style='font-size: 20pt;' size='4'/>
IE下可以使用element.paic获取，在Safari和Chrome下只需要使用element. getAttribute('paic')

1.2.5 元素中不能有一处以上的style描述
说明:IE下,一个元素中可以多次style的定义，Safari及Chrome下，若有多次描述无法生效。解决方法:统一元素中只存在一处的style描述。.
示例：<input type='text' id='comdiv' style='display:block' style='font-size: 20pt;' size='4'/>
在IE下，示例中的两处style定义都会加载，在Safari和Chrome下只有第一处style会被加载。

1.2.6 eval("idName")问题
说明: 在Safari、Chrome及IE下,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.

1.2.7 变量名与某HTML对象ID相同的问题
说明:IE、 Safari及Chrome下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.

1.2.8 获取对象方式
HTML对象的 id和name 在IE使用getElementByID都会找到，在Safari及Chrome中name是找不到的，必须严格使用getElementByID和getElementsByName.
解决方法：
id使用getElementByID
name使用getElementsByName

1.2.9 input.type属性问题
说明:IE下input.type属性为只读;但是在Safari及Chrome中下input.type属性为读写.
<input type='text' id='comdiv' size='4'/>
Safari及Chrome下，可以使用 comdiv.type ='button' 修改type类型。

1.2.10 模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口; 在Safari及Chrome中则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

1.2.11 cursor:hand 和 cursor:pointer
firefox不支持hand，但ie、Safari及Chrome中支持pointer
解决方法: 统一使用pointer

1.2.12 对select的options集合操作
枚举元素除了[]外，SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在两种浏览器上使用。注意在add后赋值元素，否则会失败。

补充：Web开发 , 其他 ,