浏览器兼容性

Posted 2020-10-15 翰弟

IE8+实现css3媒体选择方案

　　IE6-IE8 css3媒体选择 （min/max-width）的polyfill   respond.js   respond.js用法踩坑

　　css3-mediaqueries.js

html5shiv

html hack       条件注释   less-than、less-than equal、 greater-than（注意格式的要求比较严格）

　　　　<!--[if lt IE 9]>

　　　　　　IE8及以下的浏览器会显示

　　　　<![endif]-->

 

css hack 原理高级浏览器不识别不认识的css属性，也不报错

　　css属性hack（window7 IE浏览器亲测有效（IE6未测试））

    /*IE10-(不包括Edge)*/
    color: green\\9;

    /*IE8+(包括Edge)*/
    color: purple\\0;
    color: #999\\0/;

    /*IE7-*/
    !color: pink;

    /*IE6-*/
    _color: orange;

　　css选择器hack

 

/*IE7*/
html>body .test,{
    color: #00f;
    font-size: 48px;
}

/*IE7-IE6*/
.test,{
    color: #0f0;
    font-size: 48px; 
}

/*IE6-*/
* html .test{
    color: #f00;
    font-size: 48px; 
}