css怎么兼容不同浏览器？

制作页面的时候，由于浏览器的不同，对CSS的解析也会有所不同，从而达不到我们预期想要的页面效果，这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器。CSS Hank。

原始代码：

<style>
    .box{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
    }
</style>
<body>
    <div class="box">欢迎光临！</div>
</body>

条件注释法

<!--[if IE]>
<style>
    .box{
    background:red; /*只在IE下面生效*/
    }
</style>
<![endif]-->
 
<!--[if IE 6]>
    <style>
        .box{
            background:#000; /*只在IE6下面生效，其中6可以换成7/8/9等*/
        }
    </style>
<![endif]-->
 
<!--[if gte IE 6]>
    <style>
        .box{
            background:#ff9c00; /*只在IE6以上版本生效*/
        }
    </style>
<![endif]-->
 
<!--[if ! IE 6]>
    <style>
        .box{
            background:#b74a2e; /*排除IE6，同理6可以换成7/8/9等*/
        }
    </style>
<![endif]-->
 
<!--[if !IE]>
    排除IE浏览器
<![endif]-->

类内属性前缀法

“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

具体操作如下，区分可以对照表

.box{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        +background-color: red;/*IE6、7*/
        _background-color: #000;/*IE6*/
    }

区分Firefox与chrome

微调部分代码可以在大括号里面分别写。

 /*Chrome/Safari*/
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    }
    /*Firefox*/
    @-moz-document url-prefix() {
    }
    /*IE10+*/
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
    }

以上就是css怎么兼容不同浏览器？的详细内容，更多请关注易知道|edz.cc其它相关文章！