什么是 CSS hack

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

這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。

談一談瀏覽器兼容的思路

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

• 做到什么程度:
  讓哪些瀏覽器支持哪些效果

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

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

• 注釋法

    <!--[if IE 6]>
    <p>You are using Internet Explorer 6.</p>
    <![endif]-->

• IE Hack法

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

• 兼容清除浮動(dòng)

.clearfix{
    content: " ";
        display: block;
        clear: both;
}
.clearfix{
    *zoom: 1; //for ie6,7
}

• ie 67的inline-block

.target{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

• 利用插件提高兼容

 <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

以下工具/名詞是做什么的

1. 條件注釋

    <!--[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]-->

指于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。

2. IE Hack

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

針對(duì)ie的css hack

3. js 能力檢測(cè)
   檢測(cè)是否有這個(gè)屬性,方法沒有就用另外一種方式獲取這個(gè)
   通常直接用jquery來達(dá)到這個(gè)目的。
4. html5shiv.js
   讓一些自身不支持html5標(biāo)簽的瀏覽器支持html5。具體方式是使用createElement()來創(chuàng)建標(biāo)簽。
5. respond.js
   為了響應(yīng)式的頁面，為ie6／7／8模擬css3的媒體查詢。
6. css reset
   為瀏覽器自身有默認(rèn)的樣式，如padding和margin等， 不方便我們使用，所以我們要重置這些屬性，如將margin設(shè)為0，字體設(shè)置為xx等等。暴力清除。
7. normalize.css
   上面一個(gè)的進(jìn)化版本，保護(hù)了有用的瀏覽器默認(rèn)樣式。
8. Modernizr
   探測(cè)用戶瀏覽器html5和css3的一些特性，根據(jù)用戶瀏覽器是否支持這些特性來向html元素中添加不同的class。
9. postCSS
   PostCSS 是一個(gè)允許使用 JS 插件轉(zhuǎn)換樣式的工具。 這些插件可以檢查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 編譯尚未被瀏覽器廣泛支持的先進(jìn)的 CSS 語法，內(nèi)聯(lián)圖片，以及其它很多優(yōu)秀的功能。PostCSS的目標(biāo)是通過自定義插件和工具這樣的生態(tài)系統(tǒng)來改造CSS。與Sass和Less這些預(yù)編譯器相同的原則，PostCSS把擴(kuò)展的語法和特性轉(zhuǎn)換成現(xiàn)代的瀏覽器友好的CSS。

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

Can I use