CSS hack
由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack!
瀏覽器兼容的思路
- 根據用戶瀏覽器使用情況考慮要不要做
- 需要適配哪些瀏覽器以及相應的版本
- 不同瀏覽器上的顯示效果不一樣，做到哪種程度 //因為有些屬性某些瀏覽器并不支持
- 選擇需要的兼容工具
瀏覽器兼容的寫法
CSS屬性前綴法：
.container{
_color: red;/*IE6識別*/
*color: red;/*IE6,IE7識別*/
color: red\9;/*IE6-IE10識別*/
color: red\0;/*IE8-IE10識別*/
color: red\9\0;/*IE9,IE10識別*/
}
選擇器前綴法：
*html{}/*只對IE6生效*/
*+html{}/*只對IE7生效*/
@media screen\9{...} //IE6-7生效
IE條件注釋法（即HTML頭部引用if IE）：
CSS3選擇器結合JavaScript
irefox 瀏覽器css hack
@-moz-document url-prefix() {
.selector { property: value; }
}
支持所有Gecko內核的瀏覽器 (包括Firefox)
*>.selector { property: value; }
Webkit 內核瀏覽器 css hack
@media screen and (-webkit-min-device-pixel-ratio: 0) {
Selector { property: value; }
}
Opera 瀏覽器css hack
html:first-child>b\ody Selector {property:value;}
@media all and (-webkit-min-device-pixel-ratio:10000),not and all (-webkit-min-device-pixel-ratio:0) { .font1 {color:red;} }
Webkit 內核瀏覽器 css hack和Opera 瀏覽器css hack
@media all and (min-width:0px){ .font1 {color:red;} }
解釋
條件注釋
以小于符號+嘆號+兩個減號開始 兩個減號大于符號結束構成(字符均為英文小寫輸入)，而注解注釋內容放入其中。
它會根據瀏覽器的不同選擇性地給<html>標記添加（或不添加）一個包含瀏覽器版本信息的class屬性。
IE Hack
<!--[if !IE]>除IE外都可識別<![endif]-->
<!--[if IE]> 所有的IE可識別 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以識別 <![endif]-->
<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
<!--[if IE 7]> 僅IE7可識別 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
JS 能力檢測
瀏覽器提供商雖然在實現公共接口方面投入了很多精力，但結果仍然是每一種瀏覽器都有各自
的長處，也都有各自的缺點。即使是那些跨平臺的瀏覽器，雖然從技術上看版本相同，也照
樣存在不一致性問題。
能力檢測的目標不是識別特定的瀏覽器，而是識別瀏覽器的能力。采用這種方式不必顧及特定的瀏覽器如何如何，只要確定瀏覽器支持特定的能力，就可以給出解決方案。
能力檢測的基本模式如下：
if(object.property) {
//存在該屬性或方法，使用object.property
}
html5shiv.js
ie低版本不支持html5標簽，可以引入一段腳本，在ie瀏覽器中創建html5的標簽。
HTML5 Shiv是JavaScript的一種備選方案。該方案在Internet Explorer 9版本中優先啟用HTML5元素樣式，但不允許使用沒有由JavaScript定義過的元素樣式。
respond.js
Respond.js讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
就是說在IE6~8瀏覽器中兼容響應式布局。
css reset
所有的 HTML 標簽在沒有設置樣式時均被瀏覽器默認的樣式列表所裝飾 （不同瀏覽器默認樣式有所不同）。CSS 的樣式重置就是清楚瀏覽器的默認樣式 ，可以理解為對于全局的樣式定義。
通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。
Normalize.css
保護有用的瀏覽器默認樣式而不是完全去掉它們
一般化的樣式：為大部分HTML元素提供
修復瀏覽器自身的bug并保證各瀏覽器的一致性
優化CSS可用性：用一些小技巧
Modernizr
Modernizr是一套JavaScript 庫，用來偵測瀏覽器是否支持HTML5與CSS3等規格。如果瀏覽器不支持，Modernizr會使用其他的解決方法來進行模擬。
許多HTML5與CSS 3的功能已經在許多主流的瀏覽器中實現出來。Modernizr能夠告訴開發者，瀏覽器是否已經實現他們想要的功能。這讓開發者在瀏覽器上可以充分利用這些新功能，或者嘗試制作解決方案來支持那些老舊的瀏覽器。
PostCSS
PostCSS 使用 JavaScript 代碼來轉換 CSS 中的樣式。PostCSS 通過不同的插件來支持對 CSS 的不同處理。PostCSS 的插件可以完成各種不同的功能，如支持變量和混入，支持未來的 CSS 語法和添加瀏覽器特定前綴等。
屬性兼容性
caniuse.com是一個工具性的網站，幫助人們了解各個瀏覽器以及它們的不同版本對HTML5、CSS3等高級特性的支持情況，幫助網站設計人員根據網站針對的用戶有選擇的使用web設計高級特性，提高用戶體驗。
