瀏覽器的兼容性一直是個頭疼的問題，使用“欺騙”技術可使各個瀏覽器效果一致，花了些時間整理了各個瀏覽器的HACK，主要包括IE系列和最新版本的Chrome、Safari、Firefox、 Opera，比較全面的記錄下Hack，內容包括3部分：媒體查詢 hack、屬性Hack、選擇器Hack，這些Hack已經測試並得到有效運用，有需要的同學可以放心使用，筆者會在以後不斷的更新，如果有需要補充或者修改的，歡迎大家指教！
以下代碼之間的空格是必要的，缺少空格導致失效
/*---------------------------------媒體查詢hack [[---------------------------------*/
/* 只支持IE6、7 */
@media screen\9 {...}
/* 只支持IE8 */
@media \0screen {...}
/* 只支持IE6、7、8 */
@media \0screen\,screen\9 {...}
/* 只支持IE8、9、10 */
@media screen\0 {...}
/* 只支持IE9、10 */
@media screen and (min-width:0\0) {...}
/* 只支持IE10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...}
/* 支持IE9、Chrome、Safari、Firefox、 Opera */
@media all and (min-width:0){...}
/* 只支持wekit內核瀏覽器Chrome、Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {...}
/* 只支持Opera */
@media
all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {...}
/* 只支持Firefox */
@-moz-document url-prefix() {...}
如：
<p class="class">@hack@hack@hack@hack@hack@hack</p>
<style type="text/css">
@media all and (min-width:0){ /* 在IE9文本顏色爲紅色*/
.class{color:#F00;}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) { /* 在Chrome、Safari中文本顏色爲綠色 */
.class{color:#0F0;}
}
@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) { /* 在Opera中文本顏色爲藍色 */
.class{color:#00F;}
}
@-moz-document url-prefix() { /* 在Firefox中文本顏色爲品紅色 */
.class{color:#F0F;}
}
</style>/*---------------------------------媒體查詢hack ]]---------------------------------*/
/*---------------------------------選擇器hack [[---------------------------------*/
/* 只支持IE7 */
html* 選擇器{}
/* 僅支持IE7 使用該選擇器需要HTML頂部有聲明：<!DOCTYPE HTML ......>*/
*+html 選擇器{}
/* 只支持IE6 */
*html 選擇器{}
如:
<p class="class">選擇器hack選擇器hack選擇器hack選擇器hack選擇器hack選擇器hack</p>
html* .class{color:#F00;} /* 在IE7中文本顏色爲紅色 */
*+html .class{color:#0F0;} /* 在IE7中文本顏色爲綠色 */
*html .class{color:#00F;} /* 在IE6中文本顏色爲藍色 *//*---------------------------------選擇器 hack ]]---------------------------------*/
/*---------------------------------屬性hack [[---------------------------------*/
/* 只支持IE6、7、8、9、10 */
選擇器{屬性：屬性值\9;}
/* 只支持IE8、9、10 */
選擇器{屬性：屬性值\0;}
/* 支持IE8的部分屬性值、完全支持IE9、10 */
選擇器{屬性：屬性值\9\0;}
/* 僅支持IE7和IE6 */
選擇器{*屬性：屬性值;}
/* 只支持IE6 */
選擇器{_屬性：屬性值;}
/* 只不支持IE6 */
選擇器{屬性：屬性值!important;}
/* 僅支持Safari和Chrome ，且只能放在選擇器的最後一個屬性，因爲當瀏覽器解析[;;]後，不會再讀取後面屬性 */
選擇器{[;屬性:屬性值;]}
如：
<p class="class">屬性hack屬性hack屬性hack屬性hack屬性hack屬性hack</p>
<style type="text/css">
.class{
color:#F00\0;/* 在IE8和IE9中文本顏色爲紅色 */
*color:#0F0; /* 在IE7中文本顏色爲綠色 */
_color:#00F; /* IE6中顏色爲藍色 */
[;color:#F0F;]/* 在Safari和Chrome中顏色爲品紅色 */
}
</style>/*---------------------------------屬性hack ]]---------------------------------*/
建議是：儘量寫出無hack的結構和樣式，做到可以向後兼容，減少多餘代碼，更加可以體現自己專業化的態度。
作者：白樹出處：http://peunzhang.cnblogs.com/