1.什么是 CSS hack
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等是晨，或者是同一廠商的瀏覽器的不同版本媳瞪，如IE6和IE7啡氢，對CSS的解析認識不完全一樣孩等，因此會導(dǎo)致生成的頁面效果不一樣斥赋，得不到我們所需要的頁面效果璃哟。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS氛琢，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
2.談一談瀏覽器兼容的思路
- 要不要做
產(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 能力檢測做一些修補
漸進增強(progressive enhancement): 針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能户矢，然后再針對高級瀏覽器進行效果玲献、交互等改進和追加功能達到更好的用戶體驗
優(yōu)雅降級 (graceful degradation): 一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。
3.列舉5種以上瀏覽器兼容的寫法
<!--[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]-->
image.png
.box {
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對ie67有效 */
}
.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]-->
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
4.以下工具/名詞是做什么的
- 條件注釋是于HTML源碼中被IE有條件解釋的語句捌年。條件注釋可被用來向IE提供及隱藏代碼瓢娜。使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中無法正常工作礼预。
- IE Hack使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼眠砾，有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法托酸。
- js 能力檢測能力檢測的目標是識別瀏覽器的能力褒颈。使用這種方式無需顧及瀏覽器如何如何，只需確定瀏覽器是否支持特定的能力获高，就可以給出相關(guān)的方案哈肖。
- html5shiv.js解決一些瀏覽器不支持html5的一些新特性和標簽的問題。
- respond.js解決在做響應(yīng)式網(wǎng)頁的時候一些瀏覽器不支持媒體查詢的問題念秧。
- css reset重新定義樣式屬性淤井，將瀏覽器默認樣式覆蓋掉。
- normalize.css保護有用的瀏覽器默認樣式而不是完全去掉它們摊趾，修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性币狠，用一些小技巧優(yōu)化CSS可用性。相比于傳統(tǒng)的CSS reset砾层，Normalize.css是一種現(xiàn)代的漩绵、為HTML5準備的優(yōu)質(zhì)替代方案。
- Modernizr Modernizr會在頁面加載時自動檢測瀏覽器的特性肛炮，并html元素上添加一批CSS的class名稱止吐，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性。
- postCSS postCSS是一款通過JS插件來轉(zhuǎn)換CSS的工具侨糟。這些插件能幫你校驗?zāi)愕腃SS代碼碍扔、轉(zhuǎn)換未來的CSS語法、支持變量和混寫秕重、以及內(nèi)聯(lián)圖片等等不同。
