用到的網(wǎng)站
瀏覽器市場(chǎng)份額
caniuse.com 查CSS屬性兼容
browserhacks 查 Hack 的寫法

1.什么是 CSS hack
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。
CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。

2.談一談瀏覽器兼容的思路

• 要不要做
  首先從做產(chǎn)品的角度考慮，在滿足要求的情況下產(chǎn)品的受眾是誰，例如政府部門PC所用瀏覽器多為IE67，而像bilibili網(wǎng)站的受眾則是一些年輕人瀏覽器版本則高一些，可以支持一些框架動(dòng)畫特效等等。不同的受眾需求不同，弄清是效果優(yōu)先還是基本功能優(yōu)先。

然后從成本的角度 考慮有無必要做某件事，例如給瀏覽器主要為IE67的受眾做網(wǎng)站，則一些css效果是無法實(shí)現(xiàn)的，比如框圖圓角陰影等等，然而是否需要用加載圖片的方法去滿足這個(gè)效果?；竟δ軆?yōu)先的情況下是可以不用做這些事的。

• 做到什么程度讓哪些瀏覽器支持哪些效果
  在了解清楚主體瀏覽器版本的情況下，應(yīng)知道它們支持哪些效果，可以做到什么程度。

• 如何做根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
  根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
  postCSS
  條件注釋、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)。

3.列舉5種以上瀏覽器兼容的寫法

 color:red; /* 所有瀏覽器可識(shí)別*/ 
_color:red; /* 僅IE6 識(shí)別 */
 *color:red; /* IE6、IE7 識(shí)別 */
 +color:red; /* IE6、IE7 識(shí)別 */ 
*+color:red; /* IE6、IE7 識(shí)別 */ 
[color:red; /* IE6、IE7 識(shí)別 */ 
color:red\9; /* IE6、IE7、IE8、IE9 識(shí)別 */ 
color:red\0; /* IE8、IE9 識(shí)別*/
 color:red\9\0; /* 僅IE9識(shí)別 */ 
color:red \0; /* 僅IE9識(shí)別 */
 color:red!important; /* IE6 不識(shí)別!important*/```

```/* CSS選擇符級(jí)Hack */ 
*html #demo { color:red;} /* 僅IE6 識(shí)別 */
 *+html #demo { color:red;} /* 僅IE7 識(shí)別 */ 
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以識(shí)別 */
 head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以識(shí)別 */ 
:root #demo { color:red\9; } : /* 僅IE9識(shí)別 */```

```/* IE條件注釋Hack */ 
<!--[if IE]>此處內(nèi)容只有IE可見<![endif]--> 
<!--[if IE 6]>此處內(nèi)容只有IE6.0可見<![endif]--> 
<!--[if IE 7]>此處內(nèi)容只有IE7.0可見<![endif]--> 
<!--[if !IE 7]>此處內(nèi)容只有IE7不能識(shí)別，其他版本都能識(shí)別，當(dāng)然要在IE5以上。<![endif]--> 
<!--[if gt IE 6]> IE6以上版本可識(shí)別,IE6無法識(shí)別 <![endif]--> 
<!--[if gte IE 7]> IE7以及IE7以上版本可識(shí)別 <![endif]-->
 <!--[if lt IE 7]> 低于IE7的版本才能識(shí)別，IE7無法識(shí)別。 <![endif]-->
 <!--[if lte IE 7]> IE7以及IE7以下版本可識(shí)別<![endif]--> 
<!--[if !IE]>此處內(nèi)容只有非IE可見<![endif]-->```

[原文地址](http://www.ido321.com/938.html)

4.以下工具/名詞是做什么的
- 條件注釋 ：條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。

- IE Hack使用特殊的符號(hào)或者方式寫出只有IE瀏覽器可以解析的代碼，有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法
- js 能力檢測(cè) ：目標(biāo)是識(shí)別瀏覽器的能力而不是識(shí)別特定的瀏覽器。只需根據(jù)瀏覽器支持的功能給出解決方案。

- html5shiv.js ：是[JavaScript](https://zh.wikipedia.org/wiki/JavaScript)的一種備選方案。該方案在[Internet Explorer](https://zh.wikipedia.org/wiki/Internet_Explorer) 9版本中優(yōu)先啟用[HTML5](https://zh.wikipedia.org/wiki/HTML5)元素樣式，但不允許使用沒有由[JavaScript](https://zh.wikipedia.org/wiki/JavaScript)定義過的[元素](https://zh.wikipedia.org/wiki/HTML%E5%85%83%E7%B4%A0)樣式。

- respond.js ：讓IE6-8支持[CSS3](https://www.baidu.com/s?wd=CSS3&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3njKBryN-m1ubPAfLrARL0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnWm1PWT1nW03PHRkrHfzrj0d) Media Query。

- css reset：重置樣式， 讓各個(gè)瀏覽器的CSS樣式有一個(gè)統(tǒng)一的基準(zhǔn)，而這個(gè)基準(zhǔn)一般認(rèn)為就是“清零”。

- normalize.css：保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們；一般化樣式：為大部分HTML元素提供；修復(fù)自身瀏覽器的bug并保證各瀏覽器的一致性；優(yōu)化CSS的可用性：用一些小技巧；解釋代碼：用一些詳細(xì)的注釋和文檔來。

- Modernizr： 專為HTML5和CSS3開發(fā)的功能檢測(cè)類庫。當(dāng)你在網(wǎng)頁中嵌入Modernizr的腳本時(shí)，它會(huì)檢測(cè)當(dāng)前瀏覽器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同時(shí)也會(huì)檢測(cè)是否支持HTML5的特性——比如audio、video、本地儲(chǔ)存、和新的 <input>標(biāo)簽的類型和屬性等。在獲取到這些信息的基礎(chǔ)上，可以在那些支持這些功能的瀏覽器上使用它們，來決定是否創(chuàng)建一個(gè)基于JS的 fallback，或者對(duì)那些不支持的瀏覽器進(jìn)行簡(jiǎn)單的優(yōu)雅降級(jí)。另外，Modernizr還可以令I(lǐng)E支持對(duì)HTML5的元素應(yīng)用CSS樣式，這樣開發(fā) 者就可以立即使用這些更富有語義化的標(biāo)簽了。

- postCSS： 是一個(gè)使用 JS 插件來轉(zhuǎn)換 CSS 的工具。這些插件可以支持使用變量，混入(mixin)，轉(zhuǎn)換未來的 CSS 語法，內(nèi)聯(lián)圖片等操作。ostCSS 的插件可以實(shí)現(xiàn)預(yù)處理器的功能；它們還可以優(yōu)化并且自動(dòng)給代碼添加各種前綴；它們可以添加未來語法的支持，還可以提示代碼檢查的功能，它們可以處理變量和代碼邏輯，可以提供完整的網(wǎng)格系統(tǒng)；還可以提供代碼縮寫... ... 等各種各樣的操作。

> CSS Reset 是革命黨，CSS Reset 里最激進(jìn)那一派提倡不管你小子有用沒用，通通給我脫了那身衣服，憑什么你 body 出生就穿一圈 margin，憑什么你姓 h 的比別人吃得胖，憑什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等運(yùn)動(dòng)，把人家全拍扁了?？此剖潜娚降攘?，實(shí)則是浪費(fèi)了資源又占不到便宜，有求于人家的時(shí)候還得賤賤地給加回去，實(shí)在需要人家的默認(rèn)樣式了怎么辦？人家鍋都扔爐子里燒了，自己看著辦吧。Normalize.css 是改良派。他們提倡，各個(gè)元素都有其存在的道理，簡(jiǎn)單粗暴地一視同仁是不好的。body 那一圈確實(shí)擠壓了頁面的生存空間，那就改掉。士農(nóng)工商，誰有誰的作用，給他們制定個(gè)規(guī)范，確保他們?cè)谌魏螢g覽器里都干好自己的活兒。

來源:[知乎](https://www.zhihu.com/question/20094066/answer/25004727)

5.一般在哪個(gè)網(wǎng)站查詢屬性兼容性？
[caniuse.com](http://caniuse.com/) 查CSS屬性兼容