兼容问题总结

兼容问题总结

html兼容问题

1.待补充。。。

CSS兼容问题

1.待补充。。。

js兼容问题

1.获取页面向上滚动的距离

​ IE浏览器中

​ 没有 DOCTYPE声明的时候，用这两个都行

​ 有 DOCTYPE声明的时候，只能用 document.documentElement.scrollTop

​ Chrome 和 FireFox

​ 没有 DOCTYPE声明的时候，用 document.body.scrollTop

​ 有 DOCTYPE声明的时候，用 document.documentElement.scrollTop

Safari

​ 两个都不用，使用一个单独的方法window.pageYOffset

2.获取页面上左滚动的距离

​ IE浏览器中

​ 没有 DOCTYPE声明的时候，用这两个都行

​ 有 DOCTYPE声明的时候，只能用 document.documentElementLeft

​ Chrome 和 FireFox

​ 没有 DOCTYPE声明的时候，用 document.body.scrollLeft

​ 有 DOCTYPE声明的时候，用 document.documentElementLeft

Safari

​ 两个都不用，使用一个单独的方法 window.pageYOffset

3.获取元素样式兼容问题

​ js获取行内样式

​ element.style['attr']

js获取非行内样式

​ 非IE中 getComputedStyle(elem)['attr']

​ IE中 elem.currentStyle['attr']

兼容处理

	function getStyle(elem, attr) {

​		 if(elem.style[attr]){

​		  return parseInt(elem.style[attr]);

​		 }else{

​		  return parseInt(getComputedStyle(elem)[attr]) || elem..currentStyle['attr'];

​		 }}		

4.获取事件对象

​ 低版本IE：window.event

​ 高版本IE和chrom：event

​ 兼容处理：

​ e = e || wondow.event

5.事件监听绑定兼容问题

​ IE7、8中： element.attachEvent('on' + type,function( ){ })

​ 非IE中： element.addEventListener(type, function( ){ });

​ 兼容处理：

​		function bindEvent(element,type,fun) {

​		 if(navigator.userAgent.indexOf('MSIE') !== -1) {

​		  element.attachEvent('on' + type,fun);

​		 }else{

​		  element.addEventListener(type, fun);

​		 }}

6.事件委托兼容问题

​ IE中：e.srcElement

​ 非IE中：e.target

​ 兼容处理:target = e.target || e,srcElement

7.阻止默认行为兼容问题

​ IE中：e.returnValue = false

​ 非IE中：e.preventDefault()

​ 兼容处理：e.preventDefault ? e.preventDefault() : e.returnValue = false