製作頁面的時候，由於瀏覽器的不同，對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