1、浏览器兼容问题主要在CSS上,其次才是JS处理的问题。
浏览器兼容性问题处理很复杂,首先得考虑支持JS的浏览器与不支持JS的浏览器的问题,
其次得考虑不同类型的浏览器问题如:IE和FIREFOX,再次需要考虑同一类型浏览器不同版本的问题。
2、根据浏览器的特性做判断,如只有IE支持actionx控件,因此只要判断ActiveXObject函数就可以了
firefox中的dom元素都有getboxobjectfor函数,用来获取该元素的位置和大小。
opera有专门的标志window.opera
safari有openDatabase函数
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
else if (document.getBoxObjectFor)
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
else if (window.MessageEvent && !document.getBoxObjectFor)
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/)[1]
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/)[1];
//以下进行测试
if(Sys.ie) document.write('IE: '+Sys.ie);
if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
if(Sys.opera) document.write('Opera: '+Sys.opera);
if(Sys.safari) document.write('Safari: '+Sys.safari);
</script>
3、可以通过http请求头中的User-Agent字段来判断浏览器的类型和版本。
4、可以使用HTML的注释符号来包裹JS以和谐掉不支持JS浏览器的问题
5、在使用sctipt标签的时候由于有多个脚本语言如:javascript、vbsctipt等,因此建议明确指明language,并且指明JS版本有利于解决JS低
版本不支持某些语法的问题,javasctipt1.5
6、如果实在没办法提供JS服务了,那么可以使用<nosctipt>标记提示用户浏览器无法正确显示页面
7、除非绝对必须,否则不应该使用浏览器检测这个方法,因为他具有不准确性而且嵌套的if判断等大量判断语句会导致程序扩展性、阅读性以
及运行效率下降。必须使用浏览器检查一般是传递到方法的参数在浏览器之间执行不同的解释。
你还可以使用jquery的浏览器判断函数$.browser,它可以判断浏览器甚至版本。也可以使用$.boxModel来判断方框模型,$.styleFloat。
8、良好的跨浏览器编程应该是对在平时经验的积累中获知到哪些语句兼容性强,针对性的解决某些兼容问题。尽量选用兼容性强的JS语法表现
方式,如getElementById()而非document.forms[0].id;
某些JS函数增加有效性判断,如if(!windows.opener){xxx}else{xxxx}对浏览器是否支持opener函数进行了判断;又如针对EVENT的兼容,标准
事件模型定义addEventListener方法而IE为attachEvent()那么就针对性的编写
if(element.attachEvent){element.attachEvent('onclick',xxxx);}else if(element.addEventListener){element.addEventListener
('click',xxxx);}else{throw new Error('xxxx');} and so on...
浏览器兼容性问题处理很复杂,首先得考虑支持JS的浏览器与不支持JS的浏览器的问题,
其次得考虑不同类型的浏览器问题如:IE和FIREFOX,再次需要考虑同一类型浏览器不同版本的问题。
2、根据浏览器的特性做判断,如只有IE支持actionx控件,因此只要判断ActiveXObject函数就可以了
firefox中的dom元素都有getboxobjectfor函数,用来获取该元素的位置和大小。
opera有专门的标志window.opera
safari有openDatabase函数
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
else if (document.getBoxObjectFor)
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
else if (window.MessageEvent && !document.getBoxObjectFor)
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/)[1]
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/)[1];
//以下进行测试
if(Sys.ie) document.write('IE: '+Sys.ie);
if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
if(Sys.opera) document.write('Opera: '+Sys.opera);
if(Sys.safari) document.write('Safari: '+Sys.safari);
</script>
3、可以通过http请求头中的User-Agent字段来判断浏览器的类型和版本。
4、可以使用HTML的注释符号来包裹JS以和谐掉不支持JS浏览器的问题
5、在使用sctipt标签的时候由于有多个脚本语言如:javascript、vbsctipt等,因此建议明确指明language,并且指明JS版本有利于解决JS低
版本不支持某些语法的问题,javasctipt1.5
6、如果实在没办法提供JS服务了,那么可以使用<nosctipt>标记提示用户浏览器无法正确显示页面
7、除非绝对必须,否则不应该使用浏览器检测这个方法,因为他具有不准确性而且嵌套的if判断等大量判断语句会导致程序扩展性、阅读性以
及运行效率下降。必须使用浏览器检查一般是传递到方法的参数在浏览器之间执行不同的解释。
你还可以使用jquery的浏览器判断函数$.browser,它可以判断浏览器甚至版本。也可以使用$.boxModel来判断方框模型,$.styleFloat。
8、良好的跨浏览器编程应该是对在平时经验的积累中获知到哪些语句兼容性强,针对性的解决某些兼容问题。尽量选用兼容性强的JS语法表现
方式,如getElementById()而非document.forms[0].id;
某些JS函数增加有效性判断,如if(!windows.opener){xxx}else{xxxx}对浏览器是否支持opener函数进行了判断;又如针对EVENT的兼容,标准
事件模型定义addEventListener方法而IE为attachEvent()那么就针对性的编写
if(element.attachEvent){element.attachEvent('onclick',xxxx);}else if(element.addEventListener){element.addEventListener
('click',xxxx);}else{throw new Error('xxxx');} and so on...