虛擬機virtualbox

1、談一談瀏覽器兼容的思路

確定要不要做

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

做到什么程度

• 綜合考量需要做到什么瀏覽器什么版本的兼容，比如兼容到IE7 還是IE6

如何做

1. 根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
2. 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
3. postCSS
4. 條件注釋、CSS Hack、js 能力檢測做一些修補

漸進(jìn)增強和優(yōu)雅降級

1. 漸進(jìn)增強(progressive enhancement): 針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗
2. 優(yōu)雅降級 (graceful degradation): 一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容。

2、什么是 CSS hack

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

CSS Hack大致有3種表現(xiàn)形式：

1. 屬性前綴法(即類內(nèi)部Hack)：
   例如 IE6能識別下劃線"_"和星號" * "；
   IE7能識別星號" * "，但不能識別下劃線"*；
   IE6~IE10都認(rèn)識"\9"；
   但firefox前述三個都不能認(rèn)識。

.box{
        color: red;  /*所有瀏覽器都支持*/
        color:red !important;   ?* Firefox、IE7支持 *?
        _color: blue; /*ie6支持*/
       *color: pink; /*ie6、7支持*/
        color: yellow\9;  /*ie/edge 6-8*/
}

2. 選擇器前綴法(即選擇器Hack)
   *html *前綴只對ie6生效
   *+html *+前綴只對ie7生效

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

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

處理兼容問題的手段：

1. 合適的框架

Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9)

2. 條件注釋

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

3. CSS hack

.box{
        color: red;  /*所有瀏覽器都支持*/
        color:red !important;   ?* Firefox、IE7支持 *?
        _color: blue; /*ie6支持*/
       *color: pink; /*ie6、7支持*/
        color: yellow\9;  /*ie/edge 6-8*/
}

4. 使用兼容工具
5. 常見兼容處理范例

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

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

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

• IE Hack
  針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程

• js 能力檢測
  檢測瀏覽器是否支持某種特定的能力，然后給出特定的解決方案。

• html5shiv.js參考資料
  用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別，并導(dǎo)致CSS不起作用的問題。

• respond.js
  讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。

• css reset參考資料
  早期的CSS Reset的作用就是清除所有瀏覽器默認(rèn)樣式，這樣更易于保持各瀏覽器渲染的一致性。暴力清零帶來的問題：
  1.*{ margin:0; padding:0; }會帶來性能問題
  2.使用通配符存在隱性問題
  3.過渡的標(biāo)簽重置等于畫蛇添足
  4.過渡的標(biāo)簽重置導(dǎo)致語言元素失效

• normalize.css
  是一個可定制的 CSS 文件，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標(biāo)準(zhǔn)；是在現(xiàn)代瀏覽器環(huán)境下對于CSS reset的替代。
  該項目依賴于研究瀏覽器默認(rèn)元素風(fēng)格之間的差異，精確定位需要重置的樣式。相比于傳統(tǒng)的CSS Reset，Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網(wǎng)站上。
  作用：
  1.保護有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
  2.為大部分HTML元素提供一般化的樣式
  修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
  3.用一些小技巧優(yōu)化CSS可用性
  4.用注釋和詳細(xì)的文檔來解釋代碼

• Modernizr參考資料
  Modernizr.js既能給老版本瀏覽器打補丁，又能保證新瀏覽器漸進(jìn)增強的用戶體驗。

• postCSS
  PostCSS 是一個使用 JS 插件來轉(zhuǎn)換 CSS 的工具。這些插件可以支持使用變量，混入(mixin)，轉(zhuǎn)換未來的 CSS 語法，內(nèi)聯(lián)圖片等操作。

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

瀏覽器市場份額查詢
CSS屬性兼容查詢
Hack 的寫法

6、常見屬性的兼容情況