一、前言

做前端開發，必然少不了瀏覽器，然而不同的廠商有著各自版本的瀏覽器，不同的瀏覽器對css的理解和解析不一樣。那用戶使用不同廠商不同版本的瀏覽器，而我們要給用戶一個統一的網頁，那我們在寫css時就必須考慮到網頁在不同的瀏覽器展現所帶來的問題。
　　例如，一個css屬性，在IE 8不可以使用，但是在IE 9可以使用，而我們又使用了這個css屬性，又必須在IE 8上展示，那我們就需要解決這個屬性在不同版本的展示，也就是瀏覽器的兼容問題。下面通過一些解決思路和方法來探討如何解決瀏覽器的兼容問題。

二、什么是 CSS hack

不同版本或不同廠商的的瀏覽器（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持和解析存在著差異，我們為在不同的瀏覽器獲得統一的頁面展現效果，就需要針對不同的瀏覽器寫特定的CSS樣式。我們把針對不同的瀏覽器寫相應的CSS樣式的過程稱為CSS hack。

三、淺談解決瀏覽器兼容的思路

1、要不要做這個產品

如果我們要做一個產品，首先要從成本和回報的角度來考慮，這個產品是否有必要做。
　　如果有必要，我們再從產品的角度思考又是為哪類用戶做。用戶會通過哪些瀏覽器來瀏覽網頁，不同的瀏覽器使用的比例，以及是網頁展示的功能優先還是網頁展示的效果優先。這些問題我們都需要了解。
　　在這里推薦一個網站，百度統計，我們可以從這個網站了解到不同的瀏覽器的市場份額。從這個網站我們也可以看到，依然有一部分人群，使用比較老版本的瀏覽器（如IE 7、8）。我們的用戶是不是大部分使用這些老版本的瀏覽器的，一般安全性比較高的政府機關或者銀行等單位，他們的瀏覽器一般都是比較老的。如果我們的用戶是這些，那我們寫CSS時，就要考慮屬性兼容的問題。

2、做到什么程度

一般企業都會從成本和回報的角度去考慮，這個產品做到什么程度。假如產品的重要性我們已經了解，那我們要考慮讓哪些瀏覽器來支持，需不需要老版本的瀏覽器支持，支持到哪個版本等等都要了解。了解這些過后，我們在做網頁開發時，就會有一個清晰的思路，如何讓不支持這個CSS屬性的瀏覽器，獲得同樣支持的瀏覽器的頁面統一。

3、常用解決兼容的方法

一般解決兼容有兩個思路，漸進增強和優雅降級。
　　漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
　　優雅降級 (graceful degradation): 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

二者區別：
　　“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Chrome等）的前一個版本。

在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 ” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。

“漸進增強”觀點則認為應關注于內容本身。內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。

“優雅降級”和“漸進增強”都關注于同一網站在不同設備里不同瀏覽器下的表現程度。關鍵的區別則在于它們各自關注于何處，以及這種關注如何影響工作的流程。在實際的開發當中分析準確，具有什么功能或者效果的網頁，將會給我們的開發工作減少很多彎路。

在具體的開發當中我們一般參考一下幾個方法，獲得較理想的兼容效果。
方法1：根據兼容需求選擇技術框架/庫(jquery)。
方法2：根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)。
方法3：postCSS
方法4：條件注釋、CSS Hack、js 能力檢測做一些修補。

四、瀏覽器兼容的寫法舉例

以下包含但不限于

1、選擇合適的框架

①、Bootstrap (>=ie8) ：即IE 8及以上都可以使用。
②、jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)：jQuery2以下版本，IE6及以后瀏覽器都能識別；jQuery2以上IE9及以上都能使用。
③、Vue (>= ie9)：IE9及以后版本都能使用。

2、條件注釋 (conditional comment)

條件注釋是于HTML源碼中被 Microsoft Internet Explorer 有條件解釋的語句。條件注釋可被用來向 Internet Explorer 提供及隱藏代碼。也稱：IE hack。
　　有兩種“條件注釋”：下層顯示 (downlevel revealed)和下層隱藏(downlevel hidden)。
下層隱藏：
下層顯示 ：<![if expression]> HTML <![endif]>
如下是兩個“下層隱藏”條件注釋的示例。

或者

第一個示例中的指令將會讓 IE 8 讀取指定的CSS文件，而 IE 7 或者其它版本的 IE 將會忽略它。非 IE 的瀏覽器同樣會把它忽略因為它看起來像一條標準的 HTML 注釋。第二條示例里的標記將會讓 IE 5 至 7 讀取其內的 CSS 樣式。通過對這種標記的不同的使用你也可以挑出 IE 6, IE 5 或者比指定版本更新（大）或更舊（小）版本的 IE。

這里解釋一下標準 HTML 注釋：標準 HTML 注釋：
　　注釋標簽用于在源代碼中插入注釋。注釋不會顯示在瀏覽器中。您可使用注釋對您的代碼進行解釋，這樣做有助于您在以后的時間對代碼的編輯。當您編寫了大量代碼時尤其有用。
　　使用注釋標簽來隱藏瀏覽器不支持的腳本也是一個好習慣（這樣就不會把腳本顯示為純文本）。

3、CSS hack

CSS Hack大致有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。browserhacks 查 Hack 的寫法網站。

（1）屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線""和星號" * "，IE7能識別星號" * "，但不能識別下劃線""，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。
示列：
background-color:red; /* All browsers */ background-color:blue !important;/* All browsers but IE6 */ *background-color:black; /* IE6, IE7 */ +background-color:yellow;/* IE6, IE7*/ background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */ background-color:purple\0; /* IE8, IE9, IE10 */ background-color:orange\9\0;/*IE9, IE10*/ _background-color:green; /* Only works in IE6 */
（2）選擇器前綴法(即選擇器Hack)。
示例：
*html *前綴只對IE6生效 *+html *+前綴只對IE7生效 @media screen\9{...}只對IE6/7生效
（3）IE條件注釋法(即HTML條件注釋Hack)：上文已談到條件注釋，此處不再贅述。

4、常見屬性的兼容情況

inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圓角: >= ie9
陰影: >= ie9
動畫/漸變: >= ie10

五、一些和兼容相關的開發利器

1、html5shiv.js：
HTML5 Shiv支持在舊版Internet Explorer中使用HTML5細分元素，并為Internet Explorer 6-9，Safari 4.x（和iPhone 3.x）和Firefox 3.x提供基本的HTML5樣式。
2、respond.js：
此腳本的目標是提供一個快速和輕量級（3kb縮小/ 1kb gzipped）腳本，以便
在不支持CSS3媒體查詢的瀏覽器中啟用響應式網頁設計，特別是Internet Explorer 8及更低版本。
3、css reset：其目的是將所有的瀏覽器的自帶樣式重置掉，這樣更易于保持各瀏覽器渲染的一致性。不過，由于出現了更加優秀的Normalize.css，所以css reset基本上被替代了。
4、normalize.css：
Normalize.css只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統的CSS reset，Normalize.css是一種現代的、為HTML5準備的優質替代方案。
Normalize.css現在已經被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網站上。
5、Modernizr：
Modernizr是一套JavaScript 庫，用來偵測瀏覽器是否支持HTML5與CSS3等規格。如果瀏覽器不支持，Modernizr會使用其他的解決方法來進行模擬。
許多HTML5與CSS 3的功能已經在許多主流的瀏覽器中實現出來。Modernizr能夠告訴開發者，瀏覽器是否已經實現他們想要的功能。這讓開發者在瀏覽器上可以充分利用這些新功能，或者嘗試制作解決方案來支持那些老舊的瀏覽器。
6、Postcss：
PostCSS是一個使用JS插件轉換樣式的工具。這些插件可以刪除您的CSS，支持變量和混合，透明未來的CSS語法，內聯圖像等。

六、task12完

保持饑餓保持學習
注：CSS所有的屬性我們都可以在這個網站去查[caniuse.com]
參考資料：
1、 http://blog.csdn.net/freshlover/article/details/12132801
2、http://blog.csdn.net/xiongzhengxiang/article/details/7999525
3、https://zh.wikipedia.org/zh-hans/%E6%9D%A1%E4%BB%B6%E6%B3%A8%E9%87%8A
4、http://www.w3school.com.cn/tags/tag_comment.asp
5、http://jerryzou.com/posts/aboutNormalizeCss/
6、https://zh.wikipedia.org/wiki/Modernizr