在线用户使用比较多的浏览器中,分为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属性,别的浏览器都不可以识别出这一属性。问题解决。
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属性,别的浏览器都不可以识别出这一属性。问题解决。