关于浏览器兼容性问题
1.主要的浏览器内核
webkit浏览器(chrome,360等),firefox浏览器,opera浏览器,IE浏览器(IE9前后的区别,很关键)
(后面的浏览器可以不记住内核名称)
2.浏览器版本检测
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[/: ]([d.]+)/ ) || [])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};
http://www.jb51.net/article/31729.htm
3.IE的兼容模式
IE浏览器从IE8开始添加了兼容模式,开启后会以低版本的IE进行渲染。兼容模式有可能会导致网页显示出问题,于是我们通常在HTML中添加下列代码来使 IE 使用固定的渲染模式:
<metahttp-equiv="X-UA-Compatible"content="IE=8"><!--以IE8模式渲染--> <metahttp-equiv="X-UA-Compatible"content="IE=7"><!--以IE7模式渲染-->
http://www.jb51.net/css/88637.html
4.IE的怪异模式
在ie6,ie7,ie8下,如果不声明DOCTYPE,在会触发怪异模式(quirks 模式)。
怪异模式是老版本,怪异模式通常模拟老式浏览器(比如Microsoft IE4 和Netscape Navigator4)的解析模式。
http://www.jb51.net/css/384176.html
5.IE8(及之前)浏览器事件绑定方式的不同
添加事件
//w3c标准
addEventListener(type, listener, useCapture);
//低版本的ie浏览器
attachEvent(type, listener);
删除事件
//w3c标准
removeEventListener(event,function,capture/bubble);
//低版本的ie浏览器
detachEvent(event,function);
解决方案:使用jquery库(jQuery 2.0以前的版本)
6.ie7(及之前)的浏览器不支持png半透明效果
解决方案:使用滤镜实现或者做降级处理
7.IE8(及之前)的浏览器不支持H5和CSS3,IE9对H5和css3支持不全。
解决方案:降级处理
8.CSS3属性前缀问题
大部分主流浏览器支持W3C标准写法,部分浏览器(个别android手机浏览器)不支持W3C标准写法,需要加前缀,前缀包括-webkit -o -ms -moz
9.关于降级处理
在不支持h5和css3的浏览器上通过其他替代方案,或者不进行实现,给用户以友好的提示,但是要尽量保证页面的美观和功能的完整性。
10.ajax的实现
w3c使用XMLHttpRequest , IE8(及之前)浏览器中使用ActiveXObject
11. ie各个版本hack
/*类内部hack:*/
.header {_100px;} /* IE6专用*/
.header {*+100px;} /* IE7专用*/
.header {*100px;} /* IE6、IE7共用*/
.header {100px ;} /* IE8、IE9共用*/
.header {100px9;} /* IE6、IE7、IE8、IE9共用*/
.header {330px9 ;} /* IE9专用*/
/*选择器Hack:*/
*html .header{} /*IE6*/
*+html .header{} /*IE7*/