浏览器兼容性笔记

浏览器兼容性

首先可以在caniuse.com中查询一些html，css，js兼容性情况
HTML5兼容性
PC端：可以引入html5shiv.js 来解决一些html5标签在IE6/7/8中不能兼容的情况
移动端：可以放心使用HTML5的标签
javascript兼容性

//比如requestAnimationFrame的兼容性处理
var requestAnimationFrame = window.requestAnimationFrame ||
	window.webkitRequestAnimationFrame || 
	window.mozRequestAnimationFrame ||
	window.oRequestAnimationFrame ||
	window.msRequestAnimationFrame ||
	function(fn){ //如果以上都不行则自己定义一个类似的或者直接报错
		setTimeout(fn,16);
	}

CSS3兼容性

//1.加厂商前缀
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
//2.使用sass，less进行前端工程化处理
//3.使用modernizr.js来为不支持的元素添加相应的no-类来进行处理

单行多行文字溢出省略

单行

.text-ellipsis {
	overflow: hidden; //文字溢出隐藏
	text-overflow: ellipsis; //多余的文字用省略代替
	white-space: nowrap;  //文字不换行
}

//配合flex布局使用时，在文本外再包裹一层<span>标签进行处理

多行

//只兼容webkit内核
.multiline-ellipsis {
	overflow: hidden; //文字溢出隐藏
	text-overflow: ellipsis; //多余的文字用省略代替
	display: -webkit-box;
	-webkit-line-clamp:2; //显示文本的行数
	-webkit-box-orient: vertical;
	white-space: normal !important;
	word-wrap: break-word;
}