用到的網(wǎng)站
瀏覽器市場份額
caniuse.com 查CSS屬性兼容
browserhacks 查 Hack 的寫法
1.什么是 CSS hack
由于不同廠商的瀏覽器惧笛，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本逞泄，如IE6和IE7患整，對CSS的解析認識不完全一樣拜效，因此會導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果各谚。
CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器紧憾。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果昌渤。
2.談一談瀏覽器兼容的思路
- 要不要做
首先從做產(chǎn)品的角度考慮赴穗，在滿足要求的情況下產(chǎn)品的受眾是誰，例如政府部門PC所用瀏覽器多為IE67膀息，而像bilibili網(wǎng)站的受眾則是一些年輕人瀏覽器版本則高一些般眉，可以支持一些框架動畫特效等等。不同的受眾需求不同潜支，弄清是效果優(yōu)先還是基本功能優(yōu)先甸赃。
然后從成本的角度 考慮有無必要做某件事，例如給瀏覽器主要為IE67的受眾做網(wǎng)站冗酿，則一些css效果是無法實現(xiàn)的埠对，比如框圖圓角陰影等等，然而是否需要用加載圖片的方法去滿足這個效果裁替∠盥辏基本功能優(yōu)先的情況下是可以不用做這些事的。
做到什么程度讓哪些瀏覽器支持哪些效果
在了解清楚主體瀏覽器版本的情況下胯究，應(yīng)知道它們支持哪些效果稍计，可以做到什么程度。如何做根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
根據(jù)兼容需求選擇兼容工具(html5shiv.js裕循、respond.js臣嚣、css reset、normalize.css剥哑、Modernizr)
postCSS
條件注釋硅则、CSS Hack、js 能力檢測做一些修補株婴。
3.列舉5種以上瀏覽器兼容的寫法
color:red; /* 所有瀏覽器可識別*/
_color:red; /* 僅IE6 識別 */
*color:red; /* IE6怎虫、IE7 識別 */
+color:red; /* IE6、IE7 識別 */
*+color:red; /* IE6困介、IE7 識別 */
[color:red; /* IE6大审、IE7 識別 */
color:red\9; /* IE6、IE7座哩、IE8徒扶、IE9 識別 */
color:red\0; /* IE8、IE9 識別*/
color:red\9\0; /* 僅IE9識別 */
color:red \0; /* 僅IE9識別 */
color:red!important; /* IE6 不識別!important*/```
```/* CSS選擇符級Hack */
*html #demo { color:red;} /* 僅IE6 識別 */
*+html #demo { color:red;} /* 僅IE7 識別 */
body:nth-of-type(1) #demo { color:red;} /* IE9+根穷、FF3.5+姜骡、Chrome导坟、Safari、Opera 可以識別 */
head:first-child+body #demo { color:red; } /* IE7+圈澈、FF惫周、Chrome、Safari康栈、Opera 可以識別 */
:root #demo { color:red\9; } : /* 僅IE9識別 */```
```/* 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不能識別递递，其他版本都能識別，當(dāng)然要在IE5以上啥么。<![endif]-->
<!--[if gt IE 6]> IE6以上版本可識別,IE6無法識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
<!--[if lt IE 7]> 低于IE7的版本才能識別漾狼，IE7無法識別。 <![endif]-->
<!--[if lte IE 7]> IE7以及IE7以下版本可識別<![endif]-->
<!--[if !IE]>此處內(nèi)容只有非IE可見<![endif]-->```
[原文地址](http://www.ido321.com/938.html)
4.以下工具/名詞是做什么的
- 條件注釋 ：條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句饥臂。條件注釋可被用來向IE提供及隱藏代碼逊躁。
- IE Hack使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼，有CSS屬性前綴法隅熙、選擇器前綴法以及IE條件注釋法
- js 能力檢測 ：目標是識別瀏覽器的能力而不是識別特定的瀏覽器稽煤。只需根據(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：重置樣式匾二， 讓各個瀏覽器的CSS樣式有一個統(tǒng)一的基準，而這個基準一般認為就是“清零”拳芙。
- normalize.css：保護有用的瀏覽器默認樣式而不是完全去掉它們察藐；一般化樣式：為大部分HTML元素提供；修復(fù)自身瀏覽器的bug并保證各瀏覽器的一致性舟扎；優(yōu)化CSS的可用性：用一些小技巧分飞；解釋代碼：用一些詳細的注釋和文檔來。
- Modernizr： 專為HTML5和CSS3開發(fā)的功能檢測類庫睹限。當(dāng)你在網(wǎng)頁中嵌入Modernizr的腳本時譬猫，它會檢測當(dāng)前瀏覽器是否支持CSS3的特性，比如 @font-face羡疗、border-radius染服、 border-image、box-shadow叨恨、rgba() 等柳刮，同時也會檢測是否支持HTML5的特性——比如audio、video、本地儲存诚亚、和新的 <input>標簽的類型和屬性等。在獲取到這些信息的基礎(chǔ)上午乓，可以在那些支持這些功能的瀏覽器上使用它們站宗，來決定是否創(chuàng)建一個基于JS的 fallback，或者對那些不支持的瀏覽器進行簡單的優(yōu)雅降級益愈。另外梢灭，Modernizr還可以令I(lǐng)E支持對HTML5的元素應(yīng)用CSS樣式，這樣開發(fā) 者就可以立即使用這些更富有語義化的標簽了蒸其。
- postCSS： 是一個使用 JS 插件來轉(zhuǎn)換 CSS 的工具敏释。這些插件可以支持使用變量，混入(mixin)摸袁，轉(zhuǎn)換未來的 CSS 語法钥顽，內(nèi)聯(lián)圖片等操作。ostCSS 的插件可以實現(xiàn)預(yù)處理器的功能靠汁；它們還可以優(yōu)化并且自動給代碼添加各種前綴蜂大；它們可以添加未來語法的支持，還可以提示代碼檢查的功能蝶怔，它們可以處理變量和代碼邏輯奶浦，可以提供完整的網(wǎng)格系統(tǒng)；還可以提供代碼縮寫... ... 等各種各樣的操作踢星。
> CSS Reset 是革命黨澳叉，CSS Reset 里最激進那一派提倡不管你小子有用沒用，通通給我脫了那身衣服沐悦，憑什么你 body 出生就穿一圈 margin成洗，憑什么你姓 h 的比別人吃得胖，憑什么你 ul 戴一胳膊珠子藏否。于是 *{margin:0;} 等等運動泌枪，把人家全拍扁了★醯海看似是眾生平等了碌燕，實則是浪費了資源又占不到便宜，有求于人家的時候還得賤賤地給加回去继薛，實在需要人家的默認樣式了怎么辦修壕？人家鍋都扔爐子里燒了，自己看著辦吧遏考。Normalize.css 是改良派慈鸠。他們提倡，各個元素都有其存在的道理灌具，簡單粗暴地一視同仁是不好的青团。body 那一圈確實擠壓了頁面的生存空間譬巫，那就改掉。士農(nóng)工商督笆，誰有誰的作用芦昔，給他們制定個規(guī)范，確保他們在任何瀏覽器里都干好自己的活兒娃肿。
來源:[知乎](https://www.zhihu.com/question/20094066/answer/25004727)
5.一般在哪個網(wǎng)站查詢屬性兼容性咕缎？
[caniuse.com](http://caniuse.com/) 查CSS屬性兼容
