zoukankan      html  css  js  c++  java
  • CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

    CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

    转载自:http://www.jb51.net/article/50116.htm

    现在的浏览器IE6-IE10、Firefox、Chrome、Opera、Safari。。。数量众多,可谓百家争鸣,对用户来说有了很多的可选择型,不过这可就苦了Web前端开发人员了。
    今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器。如图所示:

    下面就来看一下代码吧:

    html部分:

    复制代码 代码如下:

    <div class="content">
        <div class="test"></div>
        <div class="txt">
            <p>IE6下背景颜色:<span class="ie6" style="">#ccc</span></p>
            <p>IE7下背景颜色:<span class="ie7" style="">#666</span></p>
            <p>IE8下背景颜色:<span class="ie8" style="">#06f</span></p>
            <p>IE9下背景颜色:<span class="ie9" style="">#f00</span></p>
            <p>IE10下背景颜色:<span class="ie10" style="">#0ff</span></p>
            <p>webkit,Safari,Chrome下背景颜色:<span class="webkit-safari-gg" style="">#ff0</span></p>
            <p>FireFox下背景颜色:<span class="firefox" style="">#f0f</span></p>
            <p>Opera下背景颜色:<span class="opera" style="">#0f0</span></p>
        </div>
    </div>

    CSS部分,此部分就只贴Hack部分的代码吧,布局的就不贴了:

    复制代码 代码如下:


    .content .test {
        200px;
        height: 200px;
        background: #f60; /*all*/
        background: #06f9; /*IE*/
        *background: #666; /*IE6,7*/
        _background: #ccc; /*IE6*/
    }

    /* webkit and opera */
    @media all and (min-0){
        .content .test {
            background: #0f0;
        }
    }

    /* webkit */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        .content .test {
            background: #ff0;
        }
    }
    /* Opera浏览器 */

    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {

      head~body .content .test {
            background: #ff0;
        }

    }
    /*FireFox*/
    @-moz-document url-prefix() {
        .content .test {
            background: #f0f;
        }
    }

    /*IE9+*/
    @media all and (min-0) {
        .content .test{
            background: #f009;
            }
    }

    /*IE10+*/
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .content .test {
            background: #0ff;
        }
    }

    /*iPhone / mobile webkit */

    @media screen and (max-device- 480px) {

      .content .test {
           background: #0ff;
         }

    }

    4、IE9浏览器

    :root Selector {property: value9;}
    上面是IE9的写法,具体应用如下:

    :root .demo {color: #ff09;}
    5、IE9以及IE9以下版本

    Selector {property:value9;}
    这种写法只有IE9以及IE9以下版本能识别,注意此处“9”只能是“9”不能是别的,比如说“8”,不然会失去效果的,如:

    .demo {background: lime9;}
    6、IE8浏览器

    Selector {property: value/;} 或者: @media �screen{ Selector {property: value;} }
    上面写法只有IE能识别,如:

    .color {color: #fff/;} 或者: @media �screen{ .color {color: #fff;} }
    7、IE8以及IE8以上的版本

    Selector {property: value;}
    这种写法只有IE8以及IE8以上版本支持,如

    .demo {color: #ff0�;}
    8、IE7浏览器

    *+html Selector{property:value;} 或 *:first-child+html Selector {property:value;}
    上面两种是IE7浏览器下才能识别,如:

    *+html .demo {background: green;} 或者: *:first-child+html .demo {background: green;}
    9、IE7及IE7以下版本浏览器

    Selector {*property: value;}
    上面的写法在IE7以及其以下版本都可以识别,如:

    .demo {*background: red;}
    10、IE6浏览器

    Selector {_property/**/:/**/value;} 或者: Selector {_property: value;} 或者: *html Selector {property: value;}
    具体应用如下:

    .demo {_width/**/:/**/100px;} 或者: .demo {_ 100px;} 或者: *html .demo { 100px;}

  • 相关阅读:
    每日日报2020.12.1
    每日日报2020.11.30
    981. Time Based Key-Value Store
    1146. Snapshot Array
    565. Array Nesting
    79. Word Search
    43. Multiply Strings
    Largest value of the expression
    1014. Best Sightseeing Pair
    562. Longest Line of Consecutive One in Matrix
  • 原文地址:https://www.cnblogs.com/limeiky/p/6169901.html
Copyright © 2011-2022 走看看