虛擬機(jī)virtualbox

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

確定要不要做

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

做到什么程度

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

如何做

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

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

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

2怜械、什么是 CSS hack

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

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

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

.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 *前綴只對(duì)ie6生效
   *+html *+前綴只對(duì)ie7生效

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

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; /* 僅對(duì)ie67有效 */
}

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

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

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

• js 能力檢測(cè)
  檢測(cè)瀏覽器是否支持某種特定的能力板壮，然后給出特定的解決方案逗鸣。

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

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

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

• normalize.css
  是一個(gè)可定制的 CSS 文件卿樱，使瀏覽器呈現(xiàn)的所有元素僚害，更一致和符合現(xiàn)代標(biāo)準(zhǔn)；是在現(xiàn)代瀏覽器環(huán)境下對(duì)于CSS reset的替代殿如。
  該項(xiàng)目依賴于研究瀏覽器默認(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.保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
  2.為大部分HTML元素提供一般化的樣式
  修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
  3.用一些小技巧優(yōu)化CSS可用性
  4.用注釋和詳細(xì)的文檔來解釋代碼

• Modernizr參考資料
  Modernizr.js既能給老版本瀏覽器打補(bǔ)丁试和，又能保證新瀏覽器漸進(jìn)增強(qiáng)的用戶體驗(yàn)讯泣。

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

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

瀏覽器市場(chǎng)份額查詢
CSS屬性兼容查詢
Hack 的寫法

6寻行、常見屬性的兼容情況