一、什么是 CSS hack
CSS hack由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
簡單的說，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。
CSS hack大致有3種表現形式，css屬性前綴法、選擇器前綴法以及IE條件注釋法。實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。
二、談一談瀏覽器兼容的思路
-
要不要做
- 產品的角度（產品的受眾、受眾的瀏覽器比例、效果優先還是基本功能優先）
- 成本的角度（有無必要做某件事）
-
做到什么程度
- 讓哪些瀏覽器支持哪些效果
-
如何做
- 根據兼容需求選擇框架/庫（jquery）
- 根據兼容需求選擇兼容工具（html5shiv.js、respond.js、css resect、normalize.css、Modemizr）
- postCSS
- 條件注釋、CSS Hack、js能力檢測做一些修補
-
漸進增強優雅降級
- 漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
- 優雅降級：一開始就構建完整功能，然后再針對低版本瀏覽器進行兼容。
三、列舉5種以上瀏覽器兼容的寫法
-
屬性前綴法（即類內部Hack）：例如IE6能識別下劃線“”和，IE7能識別，但不能識別下劃線，IE6~IE10都識別“\9”，但firefox前述三個都不認識。
.box{ color:red; _color:blue;/*ie6*/ *color:pink;/*ie67*/ color:yellow\9;/*ie/edge 6-8*/ } -
IE條件注釋法
<!--[if IE 7]> <link rel="stylesheet" href="ie7.css" type="text/css" /> <![endif]-> -
選擇器前綴法(即選擇器Hack)：例如 IE6能識別html .class{}，IE7能識別+html .class{}或者*:first-child+html .class{}。
*html *前綴只對IE6生效 *+html *+前綴只對IE7生效 @media screen\9{...}只對IE6/7生效 @media \0screen {body {background: red; }}只對IE8有效 @media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效 @media screen\0 {body { background: green; }} 只對IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效 -
條件注釋和兼容工具結合
<<!--[if lt IE9]> <script src="../js/html5shiv.min.js"></script> <script src="../js/respond.min.js"></script> <![endif]--> -
使用Modernizr：利用Modernizr的能力檢測，對標簽不存在的能力特別優化，而不是利用if這種條件注釋。
<html class="no-js no-textshadow"> <div class="box">hello</div> .box{ text-shadow:3px 3px 3px; }/*IE67下不支持*/ .no-textshadow .box{ border:1px solid red; }/*IE7下另外設定*/
四、以下工具/名詞是做什么的
- 條件注釋：條件注釋可被用來向IE提供及隱藏代碼。（IE 10不在支持條件注釋）
- IE Hack：針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
- js 能力檢測：檢測當前瀏覽器是否支持某些特定的js樣式。
- html5shiv.js：針對不支持HTML5標簽的瀏覽器，創建并模擬HTML5的標簽，并使瀏覽器渲染該標簽。
- respond.js：為不支持css3媒體查詢的瀏覽器（IE678）模擬css3的媒體查詢。
- css reset：清除瀏覽器默認樣式。
- normalize.css：“css reset的替代品”，保護有用的瀏覽器默認樣式；一般化的樣式：為大部分HTML元素提供；修復瀏覽器自身的bug并保證各瀏覽器的一致性；用一些小技巧優化css可用性；用注釋和詳細的文檔來解釋代碼。
- Modernizr：是一個JS類庫，用來檢測瀏覽器的CSS3和HTML5能力，從而解決瀏覽器的兼容問題。
- postCSS：利用JS插件轉換CSS。
五、一般在哪個網站查詢屬性兼容性？
- caniuse.com查css屬性兼容
補充兩個網站：
- browserhacks查hack的寫法
- 瀏覽器市場份額
