zoukankan      html  css  js  c++  java
  • IE 兼容性写法

    1. 条件注释语句

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
    <!--[if IE]> 所有的IE可识别 <![endif]-->
    <!--[if IE 6]> 仅IE6可识别 <![endif]-->
    <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
    <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
    <!--[if IE 7]> 仅IE7可识别 <![endif]-->
    <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
    <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
    <!--[if IE 8]> 仅IE8可识别 <![endif]-->
    <!--[if IE 9]> 仅IE9可识别 <![endif]-->

    2. CSS hack 写法

    /* 所有浏览器 通用*/
    height: 100px;  
     
    /* IE6 专用 */
    _height: 100px;
     
    /* IE6 专用 */
    *height: 100px;  
     
    /* IE7 专用 */
    *+height: 100px;
     
    /* IE7、FF 共用 */
    height: 100px !important;
     
    /* IE6 7 8 9 10通用 */
     
    height: 100px9;

    (1)*:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;

    (2)!important: 除IE6不能识别 !important外,  FF+IE8+IE7都能识别!important ;

    (3)_ : 除IE6支持_ 外,  FF+IE8+IE7都不支持_;

    (4)9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)

    .test{ /* 1. */
            /* color:#09F; 以前是IE8/9, 现在10也支持 */
            color:#09F/; /* 以前是IE8 only, 现在IE9/10也支持. 如要排除IE9需要使用下面的rule重设IE9样式 */
    }
    @media all and (min-0) { /* 2. */
        .test{color:red9; }/* IE9 only, 现在IE10也支持 */
        /* Ps:老外的方法都是,根本没考虑Opera */
    }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* 3. */
       .test { color: green; } /* IE10+ */
    }
    :root .test { color:#9639; } /* 以前IE9 only, 现在10也支持, 优先级高于@media, 优先级太高, 尽量少用 */

    3. 识别IE10

    1) 特性检测:@cc_on

    我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack:该脚本里面的IE排除条件注释,以确保IE6-9不承认它,然后它功能检测到了名为@ cc_on。在这里:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    </head>
    <body>
    <!--[if !IE]><!--<script>  
    if (/*@cc_on!@*/false) {  
        document.documentElement.className+=' ie10';  
    }  
    </script><!--<![endif]-->
    </body>
    </html>

    用法

    .ie10 .example {  
       /* IE10-only styles go here */  
    }
    2)@media -ms-high-contrast

    IE10支持媒体查询,然后也支持-ms-high-contrast这个属性,所以,我们可以用它来hack ie10:

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
       /* IE10-specific styles go here */  
    }
    3) @media 0
    @media screen and (min-0) {  
        /* IE9 and IE10 rule sets go here */  
    }

    参考:

    http://feilong.org/ie7-ie8-ie6-firefox-css-hack

    http://www.fantxi.com/blog/archives/ie8-ie9-css-hack/

    http://www.wufangbo.com/ie10-css-hack/

  • 相关阅读:
    商城问题
    web基础重难点
    业务流程
    主流框架面试题
    数据库:索引-引擎-优化
    【jquey代码】基于选中的checkbox 删除对应的一行数据
    javascript中获取json对象的value,拼接到页面上
    【json对象和json格式的字符串】
    【idea中创建springMVC项目的2个坑】不识别@Autowired 以及 Mapper.xml的配置
    【eclipse和idea】创建spring项目时的一处不同
  • 原文地址:https://www.cnblogs.com/cxp9876/p/3935675.html
Copyright © 2011-2022 走看看