1旋讹、什么是 CSS hack
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等扣囊，或者是同一廠商的瀏覽器的不同版本嫁赏，如IE6和IE7价认，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁面效果不一樣顾患，得不到我們所需要的頁面效果番捂。CSS hack 就是這種情況下我們針對(duì)不同的瀏覽器去寫不同的CSS的一個(gè)過程，讓它能夠同時(shí)兼容不同的瀏覽器江解，能在不同的瀏覽器中也能得到我們想要的頁面效果设预。
2、談一談瀏覽器兼容的思路
1.首先需要考慮產(chǎn)品的類型以及受眾犁河，按照受眾的使用各種瀏覽器的比例來決定是效果優(yōu)先還是功能優(yōu)先鳖枕。
2.考慮所需工時(shí)，及投入產(chǎn)出比來決定是否優(yōu)化
3.考察具體需要針對(duì)那些瀏覽器進(jìn)行優(yōu)化桨螺，是采用漸進(jìn)增強(qiáng)還是優(yōu)雅降級(jí)
4.根據(jù)不同的瀏覽器選擇技術(shù)框架：
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9)
5.根據(jù)兼容需求選擇兼容工具h(yuǎn)tml5shiv.js宾符、respond.js、css reset灭翔、Modernizr魏烫、postCSS
6.條件注釋、CSS Hack缠局、js 能力檢測做一些修補(bǔ)则奥。
3、列舉5種以上瀏覽器兼容的寫法
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–-> 項(xiàng)目 范例 說明 狭园！ [if !IE] 非IE lt [if lt IE 5.5] 小于IE 5.5 lte [if lte IE 6] 小于等于IE6 gt [if gt IE 5] 大于 IE5 gte [if gte IE 7] 大于等于IE7 | [if (IE 6)|(IE 7)] IE6或者IE7
- 屬性選擇器：
.box{ color: yellow; _color: blue; /*IE6*/ *color: red读处； /*IE7*/ color: orange\9; /*IE6-8*/ } - 選擇器前綴：
*html *前綴只對(duì)IE6生效 *+html *+前綴只對(duì)IE7生效 @media screen\9{...}只對(duì)IE6/7生效 @media \0screen {body { background: red; }}只對(duì)IE8有效 @media \0screen\,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效 @media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效等等 - 條件注釋：
如：
<!DOCTYPE html>
<html dir="ltr" lang="en-US" class="no-js"> - 其他:
!important ,表示高優(yōu)先級(jí)，ie7及以上唱矛，firefox都支持罚舱，ie6認(rèn)識(shí)帶!important的樣式屬性井辜，但不認(rèn)識(shí)!important的優(yōu)先級(jí)；
-webkit- 管闷，針對(duì)safari粥脚，chrome瀏覽器的內(nèi)核CSS寫法
-moz-，針對(duì)firefox瀏覽器的內(nèi)核CSS寫法
-ms-包个，針對(duì)ie內(nèi)核的CSS寫法
-o-刷允，針對(duì)Opera內(nèi)核的CSS寫法
還有使用Modernizr等類似工具
運(yùn)行的時(shí)候它會(huì)在html元素上添加一批CSS的class名稱，這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性碧囊，支持的特性就直接顯示該天特性的名稱作為一個(gè)class（例:canvas,websockets）树灶，不支持的特性顯示的class是“no-特性名稱”。
可以直接使用Modernizr在元素里生成的class名稱糯而，在你的css文件里定義相應(yīng)的屬性以便支持當(dāng)前瀏覽器天通。例如，下面的代碼可以屬性熄驼，在支持shadow陰影的瀏覽器顯示shadow像寒，不支持的瀏覽器顯示標(biāo)準(zhǔn)的邊框：
.boxshadow #MyContainer { border: none; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px; } .no-boxshadow #MyContainer { border: 2px solid black; }
4、以下工具/名詞是做什么的
- 條件注釋:
條件注釋 是于HTML源碼中被 IE 有條件解釋的語句瓜贾。條件注釋可被用來向 IE提供及隱藏代碼诺祸。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn)，并且直至 Internet Explorer 9 均支持阐虚。微軟已宣布于IE10停止支持序臂。 - IE Hack:
針對(duì)IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程 - js 能力檢測:
瀏覽器的能力檢測目標(biāo)不是檢測特定的瀏覽器，而是檢測瀏覽器的能力实束。這樣奥秆，只需要檢測瀏覽器是否支持特定的能力，就可以給出特定的解決方案咸灿。這一部分檢測是解決瀏覽器兼容問題的主要檢測构订。 - html5shiv.js:
用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別，并導(dǎo)致CSS不起作用的問題避矢。所以我們在使用過程中悼瘾，想要讓低版本的瀏覽器，即IE9以下的瀏覽器支持审胸，那么這款html5shiv.js是一個(gè)非常好的選擇亥宿！ - respond.js:
Respond.js 是一個(gè)小腳本，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性砂沛，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)烫扼。 - css reset:
將瀏覽器的默認(rèn)樣式全部去掉，更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式碍庵∮称螅“覆蓋”瀏覽器的CSS默認(rèn)屬性悟狱。最最簡單的說法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉！這就是CSS reset堰氓。 - normalize.css:
Normalize.css 是一個(gè)可以定制的CSS文件挤渐，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時(shí)候形式更統(tǒng)一。
它可以：
保留有用的默認(rèn)值双絮，不同于許多 CSS reset 的簡單粗暴浴麻。
標(biāo)準(zhǔn)化的樣式，適用范圍廣的元素掷邦。
糾正錯(cuò)誤和常見的瀏覽器的不一致性白胀。
一些細(xì)微的改進(jìn)，提高了易用性抚岗。
使用詳細(xì)的注釋來解釋代碼。 - Modernizr:
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS哪怔，無論瀏覽器是否支持這些特性宣蔚。這是處理漸進(jìn)增強(qiáng)的完美方案。
Modernizr 會(huì)在頁面加載后立即檢測特性认境；然后創(chuàng)建一個(gè)包含檢測結(jié)果的 JavaScript 對(duì)象胚委，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名。 - postCSS:
它可以被理解為一個(gè)平臺(tái)叉信，可以讓一些插件在上面跑亩冬，它提供了一個(gè)解析器，可以將CSS解析成抽象語法樹硼身，通過PostCSS這個(gè)平臺(tái)硅急，我們能夠開發(fā)一些插件，來處理CSS佳遂。
