css 兼容

最新推荐文章于 2024-10-29 19:02:06 发布

原创最新推荐文章于 2024-10-29 19:02:06 发布 · 234 阅读

CC 4.0 BY-SA版权

各种兼容

-ms-      /* 欧朋浏览器内核*/
-moz-     /* 火狐浏览器内核*/
-webkit-  /* 谷歌 苹果浏览器内核*/
-o-       /* IE浏览器内核*/

calc兼容

width: 90%;/*写给不支持calc()的浏览器*/ 
width:-moz-calc(100% - (10px + 5px) * 2); 
width:-webkit-calc(100% - (10px + 5px) * 2);
width: -o-calc(100% - (10px + 5px) * 2);
width: -ms-calc(100% - (10px + 5px) * 2);

flex兼容

.flex{
  display: -webkit-box;
  display: -webkit-flex;  
  display: -moz-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}
.flex1{
  -prefix-box-flex: 1;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.flex-c{
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.flex-a-c{
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: center;
}
.flex-j-c{
  -webkit-box-pack: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.flex-a-i{
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}