浏览器兼容性

在线用户使用比较多的浏览器中，分为2大派系 - ie内核和非ie内核，像theworld、maxthon、greenbrower、360等等都属于ie内核，而firefox、chrome、opera则 为非ie内核，众多的浏览器使我们的web程序就出现了兼容问题，像ie就有ie 6、ie7、ie8之分，这里推荐一款工具，ietester可以同时测试3个版本的ie程 序。debugBar是在ie中类似firebug的工具，不过功能上没有Firefox的Firebug的功能强大。Firefox是一款有着丰富插件的浏览器，这里我推荐3款web开发人员必备的开发工具 - Firebug、web developer、ie tab，它们集HTML查看和编辑、Javascript控制台、网络状况监 视器于一体，是开发JavaScript、CSS、HTML和 Ajax的得力助手。Firefox浏览器良好支持W3C标准，是目前对CSS支持最好的浏览器，而ie是出现的比较早，在w3c支持方面做的一直不是很好，所以两种浏览器在很多方面不尽相同。
W3c标准地址为：
http://wenku.baidu.com/link?url=X-_b6v_FbjQQhm2eyOpXRhwBKNkSkUkv8SEJnaLi8ltqQAId4Ut82C0CXtOKsPz5k0hMCIqGiXUszlFEUVdGcPQiW-DzU6PQE3bNw0YiZS_




Jquery中不同浏览器的兼容性问题
一、window.location.href("……")
问题说明：IE和360下可以使用，Firefox和Google下不能使用。
解决方法：统一使用window.location.href=””。

二、获取下拉框中的值
问题说明：
$("#rd").change(function () {
$("#name").val($("#rd").find("option:checked").text());
});
以上写法在环境浏览器的版本都比较高，IE10，FF23，Chrome29，测试都没问题，IE6、7、8、都有问题了，option的选中应该是selected，改成selected后都没问题。
解决方法：统一使用selected。


js中不同浏览器的兼容性问题

一、 document.formName.item(”itemName”) 问题
问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName"]；Firefox 下，只能使用document.formName.elements["elementName"]。
解决方法：统一使用document.formName.elements["elementName"]。



二、自定义属性问题
问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。
解决方法：统一通过 getAttribute() 获取自定义属性。

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

四、const问题
问题说明：Firefox下，可以使用const关键字或var关键字来定义常量；IE下，只能使用var关键字来定义常量。
解决方法：统一使用var关键字来定义常量。

五、input.type属性问题
问题说明：IE下 input.type 属性为只读；但是Firefox下 input.type 属性为读写。
解决办法：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。


六、frame和iframe问题
以下面的frame为例：
(1)访问frame对象
IE：使用window.frameId或者window.frameName来访问这个frame对象；
Firefox：使用window.frameName来访问这个frame对象；
解决方法：统一使用 window.frameName 来访问这个frame对象；
(2)切换frame内容
在IE和Firefox中都可以使用 window.document.getElementById(”frameId”).src = “webjx.com.html”或 window.frameName.location = “webjx.com.html”来切换frame的内容；
如果需要将frame中的参数传回父窗口，可以在frame中使用parent关键字来访问父窗口。



七、innerText的问题.

问题说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行。
解决方法：在非IE浏览器中使用textContent代替innerText。
示例：

if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = ";my text";
}
[注] innerHTML 同时被ie、firefox等浏览器支持，其他的，如outerHTML等只被ie支持，最好不用。


八、用setAttribute设置事件
var obj = document.getElementById('objId');
obj.setAttribute('onclick','funcitonname();');
FIREFOX支持，IE不支持
解决办法：
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下：
var obj = document.getElementById('objId');
obj.οnclick=function(){fucntionname();};
这种方法所有浏览器都支持

九、建立单选钮
IE以外的浏览器
var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');

IE:
var rdo =document.createElement(”<input name=”radiobtn” type=”radio” value=”checked” />”);
解决办法：
这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了
万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。