浏览器兼容

Posted 2020-06-30 酷炫神话

/* IE8-11，Firefox，Chrome，Opera，Safari */
/* 除了Opera 未鉴定，其他已鉴定*/

/* IE9+, Chrome, opera */
@media all and (min-width:0) {
    
}

/* :root 为ie9 专用
例如>:root .name{ height:15px\9;}
属性值后面加\9
*/

:root .name{ height:15px\9;}

/* IE8 专用  */
@media \0screen {   
    .name {
        height: 55px;
    }
}

/* IE10+ 识别  
10 和  11 区分
例如>.name { height: 45px\9; } 10识别,11不认
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .name {
        height: 45px;
        height: 55px\9;
    }
}

/* firefox 识别     */
@-moz-document url-prefix(){
    .name{
        height: 28px;
        line-height: 20px;
    }    
}

/* Chrome 和 Safari (Webkit内核) */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .name{
        height: 70px;
    }
}

/* opera 识别
简述:opera内核为:Presto,目前新版 opera 内核转为webkit
该hack 还没验证是否好使
*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)    

{
    head~body  .name { height:150px; }
}

【个人整理】