阅读 103

记录一些浏览器兼容笔记

浏览器兼容

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;
}
复制代码
文章分类
前端
文章标签