什么是CSS Hack？IE 6/7/8/9/10的hack分别是什么？

不同浏览器、或者同一浏览器的不同版本对CSS的支持不同

利用这种不同，使得同一段CSS代码可以在不同的浏览器上都能正常展现

　　条件注释Hack

　　属性前缀Hack

　　选择器前缀Hack

CSS Hack的策略

　　放弃IE6/7，兼容IE8/9/10

　　不再支持Quirks模式

　　关注：百度统计tongji.baidu.com/data/browser(先验比例)

　　关注：进行后验比例统计，如果某个浏览器的比例偏高，要兼容

CSS Hack方法

　　条件注释Hack

　　属性前缀Hack

　　选择器前缀Hack

　　

搭建IE的兼容测试环境

　　IETester：在win7 sp2以及以后版本，不稳定

　　使用虚拟机，搭建不同IE版本的测试环境

　　　　WinXP-IE6

　　　　Win Vista-IE7

　　　　Win7-IE8~IE11

　　　　搭建过程：

　　　　　　1.下载并安装VirtualBox

　　　　　　2.下载虚拟机映像：https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

　　　　　　

 

　　　　　　3.启动IE10的Win7映像

 

 

===================================条件注释Hack练习===================================

 

===================================属性前缀Hack练习===================================

 

 

===================================选择器前缀Hack练习===================================

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            html div {
                width: 200px;
                height: 200px;
                background-color: #f00;
            }
            
            /* IE6，黄色，使用*html 只对IE6有效 */
            *html div {
                background-color: #ff0;
            }
            
            /* IE7，黑色，使用*+html 只对IE7有效 */
            *+html div {
                background-color: #000;
            }
            
            /* IE8，绿色， @media \0screen */
            @media \0screen {
                #div1 {
                    background-color: #0f0;
                }
            }
            
            /* IE9\IE10，蓝色， @media screen and (min-width:0) 只对IE9\IE10有效 */
            @media screen and (min-width:0\0) {
                #div1 {
                    background-color: #00f;
                }
            }
            
            /* IE10+，亮蓝色，@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) */
            @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
                #div1 {
                    background-color: #0ff;
                }
            }
        </style>
    </head>
    <body>
        <div id="div1">
            
        </div>
    </body>
</html>
posted @ 2021-04-15 23:22  #Friday  阅读(448)  评论(0)    收藏  举报