• 处理浏览器兼容 各个浏览器的标识 hack


    Firefox 浏览器

    @-moz-document url-prefix() { 

      .selector {  

          property: value; 

        } 

    支持所有Gecko内核的浏览器 (包括Firefox)

    *>.selector { property: value; } 

    Webkit 内核浏览器 

    @media screen and (-webkit-min-device-pixel-ratio: 0) { 

     Selector { 

       property: value; 

      } 

    Opera 浏览器

    html:first-child>body Selector {property:value;} 

    IE 浏览器针对不同的版本有不同个Hack方式。

    CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等

    选择器Hack:比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

    方式一:HTML头部引用(if IE)Hack:针对所有IE:<!--[if IE]><!--您的代码--><![endif]-->,针对IE6及以下版本:<!--[if lt IE 7]><!--您的代码--><![endif]-->,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

    1. <!--[if !IE]> 除IE外都可识别 <!--<![endif]-->

    2. <!--[if IE]> 所有的IE可识别 <![endif]-->

    3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->

    4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->

    5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->

    6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->

    7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->

    8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

    9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->

    10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->

    11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别<![endif]-->
    
    

     (2)方式二 类内属性前缀法

        说明:在标准模式中
    • “-″减号是IE6专有的hack
    • “9″ IE6/IE7/IE8/IE9/IE10都生效
    • “″ IE8/IE9/IE10都生效,是IE8/9/10的hack
    • “9″ 只对IE9/IE10生效,是IE9/10的hack

    (3)CSS hack方式三:选择器前缀法

    *html *前缀只对IE6生效
    *+html *+前缀只对IE7生效
    @media screen9{...}只对IE6/7生效
    @media screen {body { background: red; }}只对IE8有效
    @media screen\,screen9{body { background: blue; }}只对IE6/7/8有效
    @media screen {body { background: green; }} 只对IE8/9/10有效
    @media screen and (min-0) {body { background: gray; }} 只对IE9/10有效
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等
     

    IE 9   

    :root Selector {property: value9;} 

    IE 9-

    Selector {property: value9;} 

    IE 8    

    Selector {property: value/;} 

    或: 

    @media screen { 

     Selector {property: value;} 

    IE 8  +

    Selector {property: value0;} 

    IE 7

    +html Selector{property:value;} 

    或: 

    *:first-child+html Selector {property:value;} 

    IE 7-

    Selector {*property: value;} 

    IE 6

    Selector { 

     _property: value; 

    或者: 

    *html Selector { 

      property: value; 

    例如:

    div{
     background:green;/*forfirefox*/
     *background:red;/*forIE6*/(bothIE6&&IE7)
    }
    比如要分辨IE6和firefox两种浏览器,可以这样写:
     
    我在IE6中看到是红色的,在firefox中看到是绿色的。
    解释一下:
    上面的css在firefox中,它是认识不了后面的那个带星号的东西是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
    在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;*background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。
    CSS hack:区分IE6,IE7,firefox
     
    区别FF,IE7,IE6:
    background:orange;*background:green;_background:blue;
    background:orange;*background:green!important;*background:blue;
    注:IE都能识别*;标准浏览器(如FF)不能识别*;
    IE6能识别*;不能识别 !important;
    IE7能识别*,能识别!important;
    FF不能识别*,但能识别!important;
    浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6
    以: " #demo {100px;} "为例;
    #demo {100px;} /*被FIREFOX,IE6,IE7执行.*/
    * html #demo {120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
    *+html #demo {130px;} /*会被IE7执行*/
    所以最后,#demo的宽度在三个浏览器的解释为: FIREFOX:100px; ie6:120px; ie7:130px;
    IE8 最新css hack:
    "9" 例:"border:1px 9;".这里的"9"可以区别所有IE和FireFox.(只针对IE9 Hack)
    "" IE8识别,IE6、IE7不能.
    "*" IE6、IE7可以识别.IE8、FireFox不能.
    "_" IE6可以识别"_",IE7、IE8、FireFox不能.
     
     

     

     

     

     

     

    一分耕耘,一分收获
  • 相关阅读:
    Codeforces Round #455 (Div. 2) A. Generate Login【贪心】
    Codeforces Round #315 (Div. 2)【贪心/重排去掉大于n的元素和替换重复的元素】
    CSU-ACM2018寒假集训选拔-入门题
    Codeforces Round #454 C. Shockers【模拟/hash】
    Nowcoder Girl 参考题解【待写】
    2017吉首大学新生赛
    P1450 包裹快递 RP+14【二分】
    NewCode
    2017年浙江工业大学大学生程序设计迎新赛决赛题解
    Codeforces Round #451 (Div. 2) B. Proper Nutrition【枚举/扩展欧几里得/给你n问有没有两个非负整数x,y满足x·a + y·b = n】
  • 原文地址:https://www.cnblogs.com/sure2016/p/5895154.html
Copyright © 2020-2023  润新知