css 判断浏览器版本

在进行网站开发时，我们经常需要根据用户使用的浏览器版本来进行不同的处理。CSS中有一些Hack代码可以判断浏览器版本，下面我们就一起来看一下。

1. 判断IE浏览器

    /* IE 6 */    * html {
      ...    }
    /* IE 7 */    *+html {
      ...    }
    /* IE 8 */    .ie8 {
      ...    }
    

2. 判断Safari浏览器

    /* Safari 3 */    html[xmlns*=""] body:last-child {
      ...    }
    /* Safari 4 */    :root body:last-child+* {
      ...    }
    /* Safari 5 */    ::i-block-chrome,body:last-child {
      ...    }

3. 判断Chrome浏览器

    /* Chrome 1-9 */    .media.canary {
      ...    }
    /* Chrome 2+ */    :root .clearfix ?: {
      ...    }
    /* Chrome 4+ */    :-webkit-any-link {
      ...    }

4. 判断Firefox浏览器

    /* Firefox 2-3.5 */    .selector, x:-moz-any-link {
      ...    }
    /* Firefox 3-3.6 */    body:not(:-moz-handler-blocked) selector {
      ...    }
    /* Firefox 3.5 */    @-moz-document url-prefix() {
      ...    }
    

5. 判断Opera浏览器

    /* Opera 9-10 */    html:first-child >
 body#content {
      ...    }
        /* Opera 10.5 */    :root:not(:last-child) >
 #content {
      ...    }
    /* Opera 11 */    @media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {
      ...    }
    

以上是CSS中判断浏览器版本的Hack方法，当然这些方法并不一定适用于所有的浏览器版本，需要在实际开发中进行测试。在使用Hack代码时，要尽量保持代码的可读性，降低代码的维护难度。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！