一 什么是 CSS hack

• 由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認(rèn)識不完全一樣，因此會導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。

• 簡單的說，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。

• CSS 的三種三種表現(xiàn)形式

1. CSS 屬性前綴法

2. 選擇器前綴法

3. IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經(jīng)不再支持條件注釋)： ，針對IE6及以下版本：。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效

二 談一談瀏覽器兼容的思路

1. 要不要做

• 產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
• 成本的角度（有無必要做某件事）

2. 做到什么程度

• 讓哪些瀏覽器支持哪些效果

3. 如何做

• 根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)

• 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)

• postCSS

• 條件注釋、CSS Hack、js 能力檢測做一些修補

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

1. IE 條件注釋法

<!--[if IE 6]>
    <p>You are using Internet Explorer 6.</p>
    <![endif]-->
    <!--[if !IE]><!-->
    <script>alert(1);</script>
    <!--<![endif]-->
    <!--[if IE 8]>
    <link href="ie8only.css" rel="stylesheet">
    <![endif]-->

2. 屬性前綴法

.box{
  color: red;
  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow\9;  /*ie/edge 6-8*/
}

3. 選擇器前綴法

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 僅對ie67有效 */
}

4. 使用兼容性較好的技術(shù)框架

5. 使用兼容工具

• html5shiv.js ： 在IE6~8（不支持html5標(biāo)簽）上模擬html5標(biāo)簽

• respond.js ： 在IE6~8（不支持css3）上模擬CSS3 Media Queries

• CSS Reset和Normalize.css

• Modernizr.js：他會為瀏覽器的html標(biāo)簽生成一批的css的class名稱，標(biāo)記當(dāng)前瀏覽器支持和不支持的特性。我們利用html標(biāo)簽上的類名，就可以為不同版本的不同瀏覽器添加兼容樣式

四 以下工具、名詞是做什么

1. 條件注釋

• 條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。

• 使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中無法正常工作。

• 通常指的是IE條件注釋，利用IE6~9的漏洞做IE低版本兼容，如：

<!--[if lt IE 9]>低于IE9時顯示<[endif]-->在低于IE9的瀏覽器將顯示文字，其他則不顯示

2. IE Hack

• 使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼，有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法

3. js 能力檢測

• 檢測當(dāng)前瀏覽器支持和不支持的特性。如Modernizr.js,它會為瀏覽器的html標(biāo)簽生成一批的css的class名稱，標(biāo)記當(dāng)前瀏覽器支持和不支持的特性。我們利用html標(biāo)簽上的類名，就可以為不同版本的不同瀏覽器添加兼容樣式

4. html5shiv.js

• 針對不支持HTML5標(biāo)簽的瀏覽器，創(chuàng)建并模擬HTML5的標(biāo)簽的效果并使相應(yīng)的CSS生效。

5. respond.js

• 為不支持CSS3媒體查詢的瀏覽器(IE6-8)模擬CSS3的媒體查詢。

6. css reset

• 清除瀏覽器默認(rèn)的元素樣式。

7. normalize.css

• 保護(hù)有用的瀏覽器默認(rèn)樣式；一般化的樣式，修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性；優(yōu)化CSS可用性。

8. Modernizr

• 是一個JS類庫，用來檢測瀏覽器的CSS3和HTML5能力，從而解決瀏覽器的兼容問題。

9. postCSS

• 利用JS插件轉(zhuǎn)換CSS?？梢詫SS解析成抽象語法樹。

五 一般在哪個網(wǎng)站查詢屬性兼容性？

• caniuse

查css屬性 選擇器在各瀏覽器的兼容。

• browserhacks

:查css屬性 選擇器在各瀏覽器Hack的寫法