一、前言

做前端開(kāi)發(fā)精算，必然少不了瀏覽器，然而不同的廠商有著各自版本的瀏覽器碎连，不同的瀏覽器對(duì)css的理解和解析不一樣灰羽。那用戶使用不同廠商不同版本的瀏覽器，而我們要給用戶一個(gè)統(tǒng)一的網(wǎng)頁(yè)鱼辙，那我們?cè)趯慶ss時(shí)就必須考慮到網(wǎng)頁(yè)在不同的瀏覽器展現(xiàn)所帶來(lái)的問(wèn)題廉嚼。
　　例如，一個(gè)css屬性倒戏，在IE 8不可以使用怠噪，但是在IE 9可以使用，而我們又使用了這個(gè)css屬性杜跷，又必須在IE 8上展示傍念，那我們就需要解決這個(gè)屬性在不同版本的展示矫夷，也就是瀏覽器的兼容問(wèn)題。下面通過(guò)一些解決思路和方法來(lái)探討如何解決瀏覽器的兼容問(wèn)題捂寿。

二口四、什么是 CSS hack

不同版本或不同廠商的的瀏覽器（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對(duì)CSS的支持和解析存在著差異秦陋，我們?yōu)樵诓煌臑g覽器獲得統(tǒng)一的頁(yè)面展現(xiàn)效果蔓彩，就需要針對(duì)不同的瀏覽器寫特定的CSS樣式。我們把針對(duì)不同的瀏覽器寫相應(yīng)的CSS樣式的過(guò)程稱為CSS hack驳概。

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

1、要不要做這個(gè)產(chǎn)品

如果我們要做一個(gè)產(chǎn)品顺又，首先要從成本和回報(bào)的角度來(lái)考慮更卒，這個(gè)產(chǎn)品是否有必要做。
　　如果有必要稚照，我們?cè)購(gòu)漠a(chǎn)品的角度思考又是為哪類用戶做蹂空。用戶會(huì)通過(guò)哪些瀏覽器來(lái)瀏覽網(wǎng)頁(yè)，不同的瀏覽器使用的比例果录，以及是網(wǎng)頁(yè)展示的功能優(yōu)先還是網(wǎng)頁(yè)展示的效果優(yōu)先上枕。這些問(wèn)題我們都需要了解。
　　在這里推薦一個(gè)網(wǎng)站弱恒，百度統(tǒng)計(jì)辨萍，我們可以從這個(gè)網(wǎng)站了解到不同的瀏覽器的市場(chǎng)份額。從這個(gè)網(wǎng)站我們也可以看到返弹，依然有一部分人群锈玉，使用比較老版本的瀏覽器（如IE 7、8）义起。我們的用戶是不是大部分使用這些老版本的瀏覽器的拉背，一般安全性比較高的政府機(jī)關(guān)或者銀行等單位，他們的瀏覽器一般都是比較老的默终。如果我們的用戶是這些去团，那我們寫CSS時(shí)，就要考慮屬性兼容的問(wèn)題穷蛹。

2土陪、做到什么程度

一般企業(yè)都會(huì)從成本和回報(bào)的角度去考慮，這個(gè)產(chǎn)品做到什么程度肴熏。假如產(chǎn)品的重要性我們已經(jīng)了解鬼雀，那我們要考慮讓哪些瀏覽器來(lái)支持，需不需要老版本的瀏覽器支持蛙吏，支持到哪個(gè)版本等等都要了解源哩。了解這些過(guò)后鞋吉，我們?cè)谧鼍W(wǎng)頁(yè)開(kāi)發(fā)時(shí)，就會(huì)有一個(gè)清晰的思路励烦，如何讓不支持這個(gè)CSS屬性的瀏覽器谓着，獲得同樣支持的瀏覽器的頁(yè)面統(tǒng)一。

3坛掠、常用解決兼容的方法

一般解決兼容有兩個(gè)思路赊锚，漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)。
　　漸進(jìn)增強(qiáng)(progressive enhancement): 針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面屉栓，保證最基本的功能舷蒲，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)友多。
　　優(yōu)雅降級(jí) (graceful degradation): 一開(kāi)始就構(gòu)建完整的功能牲平，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

二者區(qū)別：
　　“優(yōu)雅降級(jí)”觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)域滥、最完善的瀏覽器來(lái)設(shè)計(jì)網(wǎng)站纵柿。而將那些被認(rèn)為“過(guò)時(shí)”或有功能缺失的瀏覽器下的測(cè)試工作安排在開(kāi)發(fā)周期的最后階段，并把測(cè)試對(duì)象限定為主流瀏覽器（如 IE启绰、Chrome等）的前一個(gè)版本昂儒。

在這種設(shè)計(jì)范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡(jiǎn)陋卻無(wú)妨 ” 的瀏覽體驗(yàn)酬土。你可以做一些小的調(diào)整來(lái)適應(yīng)某個(gè)特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點(diǎn)格带，因此除了修復(fù)較大的錯(cuò)誤之外撤缴，其它的差異將被直接忽略。

“漸進(jìn)增強(qiáng)”觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身叽唱。內(nèi)容是我們建立網(wǎng)站的誘因屈呕。有的網(wǎng)站展示它，有的則收集它棺亭，有的尋求虎眨，有的操作，還有的網(wǎng)站甚至?xí)陨系姆N種镶摘，但相同點(diǎn)是它們?nèi)忌婕暗絻?nèi)容嗽桩。這使得“漸進(jìn)增強(qiáng)”成為一種更為合理的設(shè)計(jì)范例。

“優(yōu)雅降級(jí)”和“漸進(jìn)增強(qiáng)”都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度凄敢。關(guān)鍵的區(qū)別則在于它們各自關(guān)注于何處碌冶，以及這種關(guān)注如何影響工作的流程。在實(shí)際的開(kāi)發(fā)當(dāng)中分析準(zhǔn)確涝缝，具有什么功能或者效果的網(wǎng)頁(yè)扑庞，將會(huì)給我們的開(kāi)發(fā)工作減少很多彎路譬重。

在具體的開(kāi)發(fā)當(dāng)中我們一般參考一下幾個(gè)方法，獲得較理想的兼容效果罐氨。
方法1：根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery)臀规。
方法2：根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js栅隐、css reset塔嬉、normalize.css、Modernizr)约啊。
方法3：postCSS
方法4：條件注釋邑遏、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)恰矩。

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

以下包含但不限于

1、選擇合適的框架

①外傅、Bootstrap (>=ie8) ：即IE 8及以上都可以使用纪吮。
②、jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)：jQuery2以下版本萎胰，IE6及以后瀏覽器都能識(shí)別碾盟；jQuery2以上IE9及以上都能使用。
③技竟、Vue (>= ie9)：IE9及以后版本都能使用冰肴。

2、條件注釋 (conditional comment)

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

或者

第一個(gè)示例中的指令將會(huì)讓 IE 8 讀取指定的CSS文件，而 IE 7 或者其它版本的 IE 將會(huì)忽略它锨推。非 IE 的瀏覽器同樣會(huì)把它忽略因?yàn)樗雌饋?lái)像一條標(biāo)準(zhǔn)的 HTML 注釋铅歼。第二條示例里的標(biāo)記將會(huì)讓 IE 5 至 7 讀取其內(nèi)的 CSS 樣式。通過(guò)對(duì)這種標(biāo)記的不同的使用你也可以挑出 IE 6, IE 5 或者比指定版本更新（大）或更舊（谢豢伞）版本的 IE椎椰。

這里解釋一下標(biāo)準(zhǔn) HTML 注釋：標(biāo)準(zhǔn) HTML 注釋：
　　注釋標(biāo)簽用于在源代碼中插入注釋。注釋不會(huì)顯示在瀏覽器中沾鳄。您可使用注釋對(duì)您的代碼進(jìn)行解釋俭识，這樣做有助于您在以后的時(shí)間對(duì)代碼的編輯。當(dāng)您編寫了大量代碼時(shí)尤其有用洞渔。
　　使用注釋標(biāo)簽來(lái)隱藏瀏覽器不支持的腳本也是一個(gè)好習(xí)慣（這樣就不會(huì)把腳本顯示為純文本）套媚。

3缚态、CSS hack

CSS Hack大致有3種表現(xiàn)形式，CSS屬性前綴法堤瘤、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack玫芦，實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。browserhacks 查 Hack 的寫法網(wǎng)站本辐。

（1）屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識(shí)別下劃線""和星號(hào)" * "桥帆，IE7能識(shí)別星號(hào)" * "，但不能識(shí)別下劃線""慎皱，IE6~IE10都認(rèn)識(shí)"\9"老虫，但firefox前述三個(gè)都不能認(rèn)識(shí)。
示列：
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 *前綴只對(duì)IE6生效 *+html *+前綴只對(duì)IE7生效 @media screen\9{...}只對(duì)IE6/7生效
（3）IE條件注釋法(即HTML條件注釋Hack)：上文已談到條件注釋祈匙，此處不再贅述。

4天揖、常見(jiàn)屬性的兼容情況

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

五夺欲、一些和兼容相關(guān)的開(kāi)發(fā)利器

1、html5shiv.js：
HTML5 Shiv支持在舊版Internet Explorer中使用HTML5細(xì)分元素今膊，并為Internet Explorer 6-9些阅，Safari 4.x（和iPhone 3.x）和Firefox 3.x提供基本的HTML5樣式。
2斑唬、respond.js：
此腳本的目標(biāo)是提供一個(gè)快速和輕量級(jí)（3kb縮小/ 1kb gzipped）腳本市埋，以便
在不支持CSS3媒體查詢的瀏覽器中啟用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，特別是Internet Explorer 8及更低版本恕刘。
3缤谎、css reset：其目的是將所有的瀏覽器的自帶樣式重置掉，這樣更易于保持各瀏覽器渲染的一致性雪营。不過(guò)弓千，由于出現(xiàn)了更加優(yōu)秀的Normalize.css衡便，所以css reset基本上被替代了献起。
4、normalize.css：
Normalize.css只是一個(gè)很小的CSS文件镣陕，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性谴餐。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的呆抑、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案岂嗓。
Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap、HTML5 Boilerplate鹊碍、GOV.UK厌殉、Rdio食绿、CSS Tricks 以及許許多多其他框架、工具和網(wǎng)站上公罕。
5器紧、Modernizr：
Modernizr是一套JavaScript 庫(kù)，用來(lái)偵測(cè)瀏覽器是否支持HTML5與CSS3等規(guī)格楼眷。如果瀏覽器不支持铲汪，Modernizr會(huì)使用其他的解決方法來(lái)進(jìn)行模擬。
許多HTML5與CSS 3的功能已經(jīng)在許多主流的瀏覽器中實(shí)現(xiàn)出來(lái)罐柳。Modernizr能夠告訴開(kāi)發(fā)者掌腰，瀏覽器是否已經(jīng)實(shí)現(xiàn)他們想要的功能。這讓開(kāi)發(fā)者在瀏覽器上可以充分利用這些新功能张吉，或者嘗試制作解決方案來(lái)支持那些老舊的瀏覽器齿梁。
6、Postcss：
PostCSS是一個(gè)使用JS插件轉(zhuǎn)換樣式的工具芦拿。這些插件可以刪除您的CSS士飒，支持變量和混合，透明未來(lái)的CSS語(yǔ)法蔗崎，內(nèi)聯(lián)圖像等酵幕。

六、task12完

保持饑餓保持學(xué)習(xí)
注：CSS所有的屬性我們都可以在這個(gè)網(wǎng)站去查[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