1松忍、什么是CSS hack
不同廠商的瀏覽器攀芯，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本萎馅，如IE6和IE7坑填，對CSS的解析認識不完全一樣抛人，因此會導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果脐瑰。于是我們就需要針對不同的瀏覽器去寫不同的CSS妖枚，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。簡單來說苍在，就是利用不同瀏覽器對不同css的識別不同這個bug绝页，在css中加入兼容各個瀏覽器的css寫法。
CSS hack大致有表現(xiàn)形式：CSS屬性前綴法寂恬、選擇器前綴法與IE條件注釋法续誉。
2、瀏覽器兼容的思路
a)首先判斷是否需要做瀏覽器兼容初肉，分別從產(chǎn)品的角度（受眾酷鸦、受眾的瀏覽器比例、效果優(yōu)先還是功能優(yōu)先等等）與成本的角度進行判斷
b)然后確定兼容的范圍牙咏，比如需要瀏覽器支持哪些效果臼隔，選擇漸進增強或者是優(yōu)雅降級；
c)最后確定兼容的方法：1.根據(jù)兼容需求選擇技術(shù)框架/庫（jQuery）眠寿；2.根據(jù)兼容需求選擇兼容工具（html5shiv.js躬翁、respond.js、css reset盯拱、nomarlize.css盒发、Modernizr）例嘱；3.使用postcss；4.使用條件注釋宁舰、CSS hack拼卵、js能力檢測做一些修補。
一般來說優(yōu)雅降級與漸進增強的原則是：如果比較難兼容的蛮艰，就保持漸進增強的原則腋腮，先維持正常的可用功能實現(xiàn)，再針對其他瀏覽器兼容做更優(yōu)秀的改動壤蚜。如果是比較容易的兼容即寡，就保持優(yōu)雅降級的原則，先構(gòu)建完整版本袜刷，再去兼容其他不好解決的兼容聪富。
3、列舉5種以上瀏覽器兼容的寫法
CSS屬性前綴hack
.target{
display: inline-block;
*display: inline; /* 對于ie6著蟹、7不兼容inline-block墩蔓，所以需要加上下面這兩句才生效*/
*zoom: 1; /*這個順序是不能變得*/
}
條件注釋
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
項目 范例 說明
！ [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
條件注釋結(jié)合類選擇器
<!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]-->
選擇器前綴hack
*html *前綴只對IE 6生效
*+html *+前綴只對IE 7生效
@media screen\9{...} \9只對IE 6/7生效
利用Modernizr.js等工具
?運行的時候它會在html元素上添加一批CSS的class名稱萧豆，這些class名稱標記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性奸披，支持的特性就直接顯示該天特性的名稱作為一個class（例:canvas,websockets），不支持的特性顯示的class是“no-特性名稱”涮雷。以下是IE9下生成的特征類型阵面。可以直接使用Modernizr在元素里生成的class名稱份殿，在你的css文件里定義相應(yīng)的屬性以便支持當(dāng)前瀏覽器膜钓。例如嗽交，下面的代碼可以屬性卿嘲，在支持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;
}
4夫壁、常用工具/名詞
a)條件注釋: 條件注釋是于HTML源碼中被 IE 有條件解釋的語句拾枣。條件注釋可被用來向 IE提供及隱藏代碼。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn)盒让，并且直至 Internet Explorer 9 均支持梅肤。微軟已宣布于IE10停止支持。
b)IE Hack: 針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程
c)js 能力檢測: 使用JS的語法檢測瀏覽器支持的屬性邑茄，以便展示效果
d)html5shiv.js: 用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別姨蝴，并導(dǎo)致CSS不起作用的問題。
e)respond.js: 讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢肺缕。
f)css reset: 覆蓋瀏覽器默認的css屬性
g)normalize.css: Normalize.css 是一個可以定制的CSS文件左医，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一授帕。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的浮梢、為HTML5準備的優(yōu)質(zhì)替代方案跛十。
h)Modernizr: 是一套 JavaScript 庫 ，用來偵測瀏覽器是否支持 HTML5 與 CSS3 等規(guī)格秕硝。如果瀏覽器不支持芥映，Modernizr會使用其他的解決方法來進行模擬。
i)postCSS: PostCSS是一個JS插件轉(zhuǎn)換樣式表的工具远豺。這些插件能夠檢驗?zāi)愕腃SS奈偏、支持變量和混合，轉(zhuǎn)化css3的新特性語法躯护、行內(nèi)圖片等霎苗。
j)css屬性兼容性查詢
兼容hack寫法查詢
