兼容汇总-style

• 教程
  常见
• 新项目公共样式常用

/* common */
/* Source Han Sans */
/* 思源黑体 CN */
/* common */
*{
box-sizing: border-box; 
-moz-box-sizing: border-box;  
-webkit-box-sizing: border-box; 
-o-box-sizing: border-box; 
-ms-box-sizing: border-box; 
margin: 0;padding: 0;
font-family: "思源黑体 CN" ;
font-size: 0;
}
input,textarea{
outline: none;
}
a{
text-decoration: none;
}

• 常见不兼容属性

• 不同浏览器内外边距不一样（M，P）

解决方法：创建公共样式时设置m0，p0

• ie9以下不能用opacity

解决方法：使用filter

opacity:0.5; 
-moz-opacity:0.5; //兼容Firefox浏览器 
 filter:alpha(opacity = 50);
 filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE6

• 字体大小和行高

解决方法：写的时候统一指定行高

• firefox不支持innerText

解决 方法：使用textContent

if(navigator.appName.indexOf("Explorer") > -1){
     document.getElementById('element').innerText = "text";
}else{
     document.getElementById('element').textContent = "text";
}

• box-sizing

 -moz-box-sizing: border-box;  
     -webkit-box-sizing: border-box; 
     -o-box-sizing: border-box; 
     -ms-box-sizing: border-box; 

-###### jq mouse事件不兼容???

• border-radius

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

• flex

.box{

    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */   

    display: flex;  display: -webkit-flex;display: -webkit-box; display: -moz-box;display: -ms-flexbox;justify-content: space-between;
 }

.flex1 {            
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;       /* OLD - Firefox 19- */      

//flex-wrap兼容
-webkit-flex-wrap:wrap;
    -webkit-box-lines:multiple;
    -moz-flex-wrap:wrap;
    flex-wrap:wrap; 
}

• css关键帧动画兼容

/*动画*/
@keyframes lft{
    from {left:-1500px;}
    to {left:0;}
}
@-webkit-keyframes lft{
    from {left:-1500px;}
    to {left:0;}
}
@-o-keyframes lft{
    from {left:-1500px;}
    to {left:0;}
}
@-moz-keyframes lft{
    from {left:-1500px;}
    to {left:0;}
}

//
@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
//使用
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s linear 2s infinite alternate;
    /* Firefox: */
    -moz-animation:myfirst 5s linear 2s infinite alternate;
    /* Safari and Chrome: */
    -webkit-animation:myfirst 5s linear 2s infinite alternate;
    /* Opera: */
    -o-animation:myfirst 5s linear 2s infinite alternate;
}

• 360浏览器好像不兼容height：fit-content、max-content等

//使用
height：auto
width: -moz-fit-content; /*firefox火狐
width: fit-content; /*chrome


 width: max-content;
    width: -moz-max-content; //works fine on Mozilla
    width: -ms-max-content; //doesn't work on EDGE and MS-Explorer

• ie 不兼容line-height

解决方法：把所用字体名称中文名改为英文名称
https://blog.csdn.net/dracotianlong/article/details/24465395

• input输入框默认字体颜色

.input_style::-webkit-input-placeholder{color:#ff3300 !important;}
.input_style::-moz-placeholder{   /* Mozilla Firefox 19+ */color:#ff3300 !important;}
.input_style:-moz-placeholder{/* Mozilla Firefox 4 to 18 */color:#ff3300 !important;}
.input_style:-ms-input-placeholder{  /* Internet Explorer 10-11 */ color:#ff3300 !important;}