什么是CSS hack
CSS hack由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等川抡，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7须尚，對CSS的解析認識不完全一樣崖堤，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果耐床。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS密幔，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果撩轰。
簡單的說胯甩，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器淤年。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果蜡豹。
CSS hack的幾種方法
- CSS hack大概有3種表現(xiàn)形式，CSS屬性前綴法溉苛、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）hack,實際項目中CSS hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異涌入的镜廉。
- 屬性前綴法（即類內部Hack）：例如IE6能識別下劃線" _ "和星號" * ",IE7能識別星號" * "，但是不能識別下劃線愚战，IE6~IE10都認識"\9"娇唯，但firefox前述三個都不能認識
- 選擇器前綴法（即選擇器Hack）
- IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經不再支持條件注釋)： ，針對IE6及以下版本：寂玲。這類Hack不僅對CSS生效塔插，對寫在判斷語句里面的所有代碼都會生效
解決瀏覽器兼容的思路
解決瀏覽器兼容問題我們一般按照以下思路進行
- 首先，我們要考慮要不要做兼容拓哟，主要從以下兩個角度去考慮
- 產品的角度（產品的受眾想许，受眾使用各種瀏覽器的比重，受眾重視的是效果優(yōu)先還是功能優(yōu)先）
- 成本角度（有沒有必要去做這樣的兼容）
- 如果要做断序，需要做到什么程度
- 讓那些瀏覽器支持哪些效果
比如IE6/7主要滿足基本使用功能流纹，不需要做什么特效，IE8以上不僅功能要滿足违诗，各種效果也要支持漱凝。
- 讓那些瀏覽器支持哪些效果
- 接下來，就是如何做的問題了
- 根據(jù)兼容需求選擇技術框架诸迟，比如Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9) - 根據(jù)兼容需求選擇兼容工具html5shiv.js茸炒、respond.js、css reset阵苇、Modernizr
- postCSS
- 使用條件注釋壁公、CSS Hack、js 能力檢測做一些修補
- 根據(jù)兼容需求選擇技術框架诸迟，比如Bootstrap (>=ie8)
以上绅项，就是我們解決瀏覽器兼容問題的大概思路
*注釋：
漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面贮尖，保證最基本的功能，然后再針對高級瀏覽器進行效果趁怔、交互等改進和追加功能達到更好的用戶體驗
優(yōu)雅降級 (graceful degradation): 一開始就構建完整的功能湿硝，然后再針對低版本瀏覽器進行兼容。
常用的瀏覽器兼容寫法
-
條件注釋
條件注釋是向html代碼中添加有條件解釋的語句润努，條件注釋可被用來向IE提供及隱藏代碼关斜。<!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![end if] -- >
| 項目 | 范例 | 說明 |
|---|---|---|
| ！ | [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 |
| I | [if (IE 6)I(IE 7)] | IE6或者IE7 |
*注意
使用了條件注釋的頁面在 IE 9 中可正常工作铺浇，但在 IE10 中無法正常工作痢畜。IE10 不再支持條件注釋
屬性選擇器法
.box {
color: red;
_color: red; /ie6/
color: red; /ie67/
clolor: blue\9; /ie/edge 6-10/
}-
選擇器前綴法
*html{} /*只對IE6生效8*/ *+html { } /* 只對IE7生效 */ -
條件注釋結合類選擇器整體優(yōu)化
<!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]-->接著創(chuàng)建對應的樣式
.iem7 .demo {color: yellow;}/IE7移動端/
.ie6 .demo{color: green;}/IE6瀏覽器/
.ie7 .demo {color: orange;}/IE7瀏覽器/
.ie8 .demo {color: lime;}/IE8瀏覽器/ -
利用Modernizr工具
運行的時候它會在html元素上添加一批CSS的class名稱，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性，支持的特性就直接顯示該天特性的名稱作為一個class（例:canvas,websockets）丁稀，不支持的特性顯示的class是“no-特性名稱”吼拥。以下是IE9下生成的特征類型<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
可以直接使用Modernizr在元素里生成的class名稱，在你的css文件里定義相應的屬性以便支持當前瀏覽器线衫。例如凿可，下面的代碼可以屬性，在支持shadow陰影的瀏覽器顯示shadow授账，不支持的瀏覽器顯示標準的邊框：
.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;
}
以下工具/名詞是做什么的
條件注釋
條件注釋 是于HTML源碼中被 IE 有條件解釋的語句枯跑。條件注釋可被用來向 IE提供及隱藏代碼。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn)白热，并且直至 Internet Explorer 9 均支持敛助。微軟已宣布于IE10停止支持。IE Hack
針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程js 能力檢測
瀏覽器的能力檢測目標不是檢測特定的瀏覽器屋确，而是檢測瀏覽器的能力纳击。這樣，只需要檢測瀏覽器是否支持特定的能力攻臀，就可以給出特定的解決方案评疗。這一部分檢測是解決瀏覽器兼容問題的主要依據(jù)。
基本模式：
if( object.propertyInQuestion){
//使用 object.propertyInQuestion
}
兩個重要的概念：
第一個概念是先檢測達成目的的最常用的特性茵烈。先檢測最常用的特性百匆，可以保證代碼最優(yōu)化，因為在多數(shù)情況下都可以避免測試多個條件呜投。
第二個概念是必須測試實際要用到的特性加匈。一個特性存在，不一定意味著另一個特性也存在仑荐。
html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別雕拼，并導致CSS不起作用的問題。所以我們在使用過程中粘招，想要讓低版本的瀏覽器啥寇，即IE9以下的瀏覽器支持，那么這款html5shiv.js是一個非常好的選擇洒扎！respond.js
Respond.js 是一個小腳本辑甜，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現(xiàn)響應式網頁設計袍冷。css reset
將瀏覽器的默認樣式全部去掉磷醋，更準確說就是通過重新定義標簽樣式『“覆蓋”瀏覽器的CSS默認屬性邓线。最最簡單的說法就是把瀏覽器提供的默認樣式覆蓋掉淌友！這就是CSS reset。-
normalize.css
Normalize.css 是一個可以定制的CSS文件骇陈，它讓不同的瀏覽器在渲染網頁元素的時候形式更統(tǒng)一震庭。
它可以：- 保留有用的默認值，不同于許多 CSS reset 的簡單粗暴你雌。
- 標準化的樣式器联，適用范圍廣的元素。
- 糾正錯誤和常見的瀏覽器的不一致性匪蝙。
- 一些細微的改進，提高了易用性习贫。
- 使用詳細的注釋來解釋代碼逛球。
Modernizr
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性苫昌。這是處理漸進增強的完美方案颤绕。
Modernizr 會在頁面加載后立即檢測特性喇完；然后創(chuàng)建一個包含檢測結果的 JavaScript 對象伴找，同時在 html 元素加入方便你調整 CSS 的 class 名样眠。postCSS
它可以被理解為一個平臺籍滴，可以讓一些插件在上面跑肃廓，它提供了一個解析器留荔，可以將CSS解析成抽象語法樹虚茶，通過PostCSS這個平臺捅暴，我們能夠開發(fā)一些插件婉陷，來處理CSS帚称。熱門插件如autoprefixer，它可以幫我們處理兼容問題秽澳，只需正常寫CSS闯睹，autoprefixer可以幫我的自動生成兼容性代碼
