浏览器兼容性

浏览器兼容性：html兼容性 样式(css)兼容性 交互(js)兼容性

html兼容性

(1)html5shiv.js 解决 ie9 以下浏览器对 html5 新增标签不识别的问题。

<!--[if lt IE 9]>
  <script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

css 兼容性

(1)不同的浏览器样式存在差异，可以通过 Normalize.css 抹平差异，也可以定制自己的 reset.css。

如：不同浏览器的标签默认的内外边距不同

解决：* { margin: 0; padding: 0; }

(2)浏览器css兼容前缀

-o-transform:rotate(7deg); // Opera
-ms-transform:rotate(7deg); // IE
-moz-transform:rotate(7deg); // Firefox
-webkit-transform:rotate(7deg); // Chrome
transform:rotate(7deg); // 统一标识语句

(3)IE6 双倍边距的问题, ie6 中设置浮动，同时又设置 margin，会出现双倍边距的问题

解决：display: inline;

(4)IE6-7 line-height 失效的问题; 在ie 中 img 与文字放一起时，line-height 不起作用

解决：都设置成 float

(5)当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

解决: 超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

(6)opacity多浏览器透明度兼容问题, opacity是css3里的属性，只有部分浏览器支持 解决：

filter: alpha(opacity=50);/*IE*/
-moz-opacity: 0.5;/*老版Mozilla*/
-khtml-opacity: 0.5;/*老版Safari*/ 
opacity: 0.5;

(7)Firefox和Chrome不兼容cursor:hand 解决: cursor:poniter兼容所有浏览器

(8)图片默认有间距 解决: 使用float 为img 布局

(9)IE浏览器hack

background-color:red; /* All browsers */  
background-color:blue !important;/* All browsers but IE6 */  
*background-color:black; /* IE6, IE7 */  
+background-color:yellow;/* IE6, IE7*/  
background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
background-color:purple\0; /* IE8, IE9, IE10 */  
background-color:orange\9\0;/*IE9, IE10*/  
_background-color:green; /* Only works in IE6 */ 

js兼容性

(1)document.documentElement和document.body 页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement; 页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body

var top = document.documentElement.scrollTop || document.body.scrollTop;

(2) DOM事件绑定与取消，阻止冒泡和默认行为

const EventUtils = {
	addEvent: function(element, type, handler) {
		if(element.addEventListener) {
			element.addEventListener(type, handler, false);
		} else if(element.attachEvent) {
			element.attachEvent(`on${type}`, handler);
		} else {
			element[`on${type}`] = handler;
		}
	},
	removeEvent: function(element, type, handler) {
		if(element.removeEventListener) {
			element.removeEventListener(type, handler);
		} else if(element.detachEvent) {
			element.detachEvent(`on${type}`, handler);
		} else {
			element[`on${type}`] = null;
		}
	},
	stopPropagation: function(event) {
		event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
	},
	preventDefault: function(event) {
		event.preventDefault ? event.preventDefault() ? event.returnValue = false;
	},
	getTarget: function(event) {
		return event.target || event.srcElement;
	},
	getEvent: function(event) {
		return event || window.event;
	}
}