CSS Hack大全-可区分出IE6-IE10、FireFox、Chrome、Opera

浏览数：94 / 时间：2015年06月09日

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            margin: 50px auto 0;
            width: 480px;
            height: 200px;
            border: 10px solid #444;
            padding: 5px;

            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            -o-border-radius: 3px;
            border-radius: 5px;
        }

        .content .test,
        .content .txt {
            float: left;
        }

        .content .txt {
            margin: 2px 0 0 10px;
            _margin-top: 4px;
        }

        .content p {
            margin-top: 4px;
            _margin-top: 2px;
            height: 20px;
            font: 14px "Microsoft YaHei", arial, serif;
            color: #666;
        }

        .content p span {
            color: #000;
            padding: 0 5px;
        }

        .content .test {
            width: 200px;
            height: 200px;
            background: #f60; /*all*/
            background: #06f\9; /*IE*/
            *background: #666; /*IE6,7*/
            _background: #ccc; /*IE6*/
        }
        
        /* webkit and opera */
        @media all and (min-width:0){
            .content .test {
                background: #0f0;
            }
        }

        /* webkit */
        @media screen and (-webkit-min-device-pixel-ratio:0) {
            .content .test {
                background: #ff0;
            }
        }
        /*FireFox*/
        @-moz-document url-prefix() {
            .content .test {
                background: #f0f;
            }
        }

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

        /*IE10+*/
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
            .content .test {
                background: #0ff;
            }
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="test"></div>
        <div class="txt">
            <p>IE6下背景颜色：<span class="ie6" style="background-color: #ccc;">#ccc</span></p>
            <p>IE7下背景颜色：<span class="ie7" style="background-color: #666;">#666</span></p>
            <p>IE8下背景颜色：<span class="ie8" style="background-color: #06f;">#06f</span></p>
            <p>IE9下背景颜色：<span class="ie9" style="background-color: #f00;">#f00</span></p>
            <p>IE10下背景颜色：<span class="ie10" style="background-color: #0ff;">#0ff</span></p>
            <p>webkit,Safari,Chrome下背景颜色：<span class="webkit-safari-gg" style="background-color: #ff0;">#ff0</span></p>
            <p>FireFox下背景颜色：<span class="firefox" style="background-color: #f0f;">#f0f</span></p>
            <p>Opera下背景颜色：<span class="opera" style="background-color: #0f0;">#0f0</span></p>
        </div>
    </div>
</body>
</html>