记录一些浏览器兼容笔记

浏览器兼容

CSS3 新属性，加浏览器前缀兼容早期浏览器

-moz- 			/* 火狐浏览器 /
-webkit- 		/ Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- 			/ Opera浏览器(早期) /
-ms- 			/ IE */

如下：
{
    -webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	-ms-animation-name: fadeIn;
    /* 不带前缀的放到最后 */
	animation-name: fadeIn;  
}

弹性布局兼容

定义布局为弹性布局

{
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: flex;
}

主轴翻转

{
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
}

子元素占剩余的空间

{
	-webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

垂直居中

{
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

水平居中

{
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
}

两端对齐

{
	-webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}