制作页面的时候，由于浏览器的不同，对CSS的解析也会有所不同，从而达不到我们预期想要的页面效果，这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器。CSS Hank。
原始代码：
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
<body>
<div class="box">欢迎光临！</div>
</body>
条件注释法
IE
<!--[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){
}
资料参见：https://www.jb51.net/css/493362.html