zoukankan      html  css  js  c++  java
  • 对ie CSS hack总结和理解

    ~~~ ie的CSS hack 主要有4种 选择器hack属性hack条件注释hack媒体查询hack

    以前觉得hack的方法很没规律,今天整理了一下,发现还是有点规律可循的。

    不过因为hack的方法各个浏览器,或同一浏览器的不同版本都是各自为政的,没有标准可循,易变性很强,要是哪天浏览器不支持某些hack方式了,那么大量采用这些hack方式去布局的页面,将会面临很大的问题,因而hack的方式去解决问题容易给日后的维护带来风险,所以还是尽量少用为好。

    CSS hack

    IE hack 专门针对IE,只有IE能识别的

    ----------- 选择器hack ------------

    /* ie6 and below */

    1. *
    example:
    *html selector{}  ~~表示html标签下的某个选择器  *html只有ie6及以下版本才能识别 *p表示任意的p标签  *html表示任意的html标签 只有ie6=-能识别 (*通配符前缀支持)
    2. .abc.aClassSelector ~~~ .abc前缀让原有的aClassSelector变成只有ie6及其一下版本才能识别的 类选择器
    .abc.aClassSelector{} /* abc为不存在的类名 随便什么名都可以 */ ~~~给同时具有这两个类名的元素定义样式 若前一个类名不存在 则采用后一个类名,只有ie6=-能识别 (选择器单元 不存在成分忽略)

    /* ie7 and below */

    1. .aClassSelector,{}   ~~~原有的类选择器加上, 变成只有ie7及其以下版本才能识别的类选择器 ,表示并列选择器 若后面不存在并列项则不影响,ie7=-能识别 不会认为有语法问题 (,并列关系符不当 包容)

    /* ie7 only */

    1. *:first-child+html selector{}  ~~~任意元素的第一个子元素后面紧跟着html  选择器的起点 这种写法只有ie7识别 同时:first-child伪类+紧跟关系符  (+紧跟关系符支持)
    2. *+html selector{}  ~~~*html 只有ie6=-能识别为html  *+html 只有ie7能识别为html 任意的元素紧跟html +紧跟关系符
    3. .classSelector,x:-IE7{} ~~.aClassSelector, ie7=-能识别该类选择器  进一步指定x:-ie7后 只有ie7能识别

    /* everything but ie 6 */  (ie6不支持父子层级关系符> 其他ie都支持)

    1. html > body .selector{} ~~~ 任何ie都能把 html>body 识别为html body,但是ie6不能. 对于ie6以外的ie来说,h2 cite 和 h2>cite 是等价的,即选择器间的空格 和 > 都是表示父子层级关系

    /* everything but ie 6/7 */  (ie67不支持选择器成分中间的注释符 ie89能忽略掉)
    1. html>/**/body .selector{}  ~~~  > 父子层级关系 ie89能把层级关系符>后的注释符 /**/忽略掉
    2. head~/**/body .selector{}  ~~~  ~ 同级跟随关系   ie89能把层级关系符>后的注释符 /**/忽略掉

    /* everything but ie678 */ 即 ie 9=+ only
    1. :root *> selector {}  ~~ 即 根节点下的 任意元素下的 某个元素 (根节点伪类:root支持 *> 任意元素子关系符支持)
    2. body:last-child .selector{}  ~~~ (:last-child修饰符支持)
    3. body:nth-of-type(1) .selector{}  ~~ (:nth-of-type(num)修饰符支持)
    4. body:first-of-type .selector{}  ~~(:first-of-type修饰符支持)

    -------------- ie属性hack -------------------
    /* ie6 */  (下划线  连字符支持)
    1. .selector{_color:red;}
    2. .selector{-color:red;}

    /* ie 67 */ (属性值后感叹号支持 跟 !important的作用类似  !后面可以是任意字符 表示着重,若刚好设为 !important则ie6-9都支持该属性值 !important对ie6而言没有提升样式权重的效果)
    1. .selector{ color:red !ie or anyword;}
    2. .selector{ *color:red; }  ~~~(属性名特殊符号前缀支持 这些特殊符号包括 * ! & $ = + .等等,最常见的还是*号)
       .selector{ !color:red; }
       .selector{ $color:red; }
       .selector{ &color:red; }
       
    --------------- ie media query hack ---------------
    /* ie67 */
    1. @media screen\9 {}

    /* ie8 */
    1. @media \0screen {}

    .....

    -------------- ie 条件注释 -------------

    <!-- [if ie 6]><p> i am a p tag , only ie 6 can recognize me <![end if]-->


    js hack 检测ie版本

    IE js hack
    (checkIE=documet.createElement("b")).innerHTML='<!--[if ie 6]><i></i><![end if]-->';
    var isIE6=checkIE.getElementsByTagName("i").length==1;
    如此类推 可以检测ie的版本

    navigator.appVersion.indexOf("MSIE 7");

  • 相关阅读:
    MVC 易忘备留
    SQL SERVER 常用易忘语句备留
    ThreadStatic特性
    jstack用法
    PV、TPS、QPS是怎么计算出来的?
    性能测试Loadrunner与Mysql
    JVM性能调优监控工具jps、jstack、jmap、jhat、jstat、hprof使用详解
    【MySQL】计算 TPS,QPS 的方式
    【转】jquery 1.3 的 live方法
    【转】HttpCompress
  • 原文地址:https://www.cnblogs.com/stephenykk/p/3000322.html
Copyright © 2011-2022 走看看