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 能力檢測做一些修補
3.列舉5種以上瀏覽器兼容的寫法
- 屬性前綴
.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有效 */
}
- inline-block
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
- html5shiv诲泌、respond等
小于ie9時生效
<!--[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]-->
4.以下工具/名詞是做什么的
條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句盲赊。條件注釋可被用來向IE提供及隱藏代碼。使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作敷扫，但在 Internet Explorer 10 中無法正常工作-
IE Hack
使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼哀蘑，有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法葵第。- 屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識別下劃線和星號绘迁，IE7能識別星號，但不能識別下劃線卒密，IE6~IE10都認識"\9"缀台，但firefox前述三個都不能認識
- 選擇器前綴法： 比如IE6能識別html .class{}，IE7能識別+html .class{}或者*:first-child+html .class{}哮奇。
- HTML頭部引用(if IE)Hack：
針對所有IE：膛腐，針對IE6及以下版本：，這類Hack不僅對CSS生效鼎俘，對寫在判斷語句里面的所有代碼都會生效哲身。 - 書寫順序： 一般是將識別能力強的瀏覽器的CSS寫在前面。瀏覽器優(yōu)先級別：FF < IE7 < IE6贸伐，CSS hack書寫順序一般為FF IE7 IE6勘天。
js 能力檢測
也稱特性檢測。能力檢測的目標(biāo)不是識別特定的瀏覽器捉邢，而是識別瀏覽器的能力脯丝。使用這種方式無需顧及瀏覽器如何如何，只需確定瀏覽器是否支持特定的能力歌逢，就可以給出相關(guān)的方案html5shiv.js
html5shiv.js是一套實現(xiàn)讓ie低版本等瀏覽器支持[HTML5]的腳本respond.js
respond.js 是一個快速巾钉、輕量的 polyfill翘狱，用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性秘案，實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計（Responsive Web Design）。css reset
css reset將所有的瀏覽器的自帶樣式重置掉，這樣更易于保持各瀏覽器渲染的一致性normalize.css
Normalize.css 只是一個很小的CSS文件阱高，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性赚导。相比于傳統(tǒng)的CSS Reset，Normalize.css是一種現(xiàn)代的赤惊、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案Modernizr
Modernizr是一個檢測用戶瀏覽器HTML5和CSS3能力的JavaScript庫吼旧。用于處理瀏覽器兼容問題，針對可用性去檢測未舟。既能給老版本瀏覽器打補丁圈暗，又能保證新瀏覽器漸進增強的用戶體驗postCSS
postCSS是使用JS插件來轉(zhuǎn)換CSS的工具，支持變量裕膀、混入员串、未來 CSS語法、內(nèi)聯(lián)圖像等昼扛。PostCSS使CSS變成JavaScript的數(shù)據(jù)寸齐，使它變成可操作。PostCSS是基于JavaScript插件抄谐，然后執(zhí)行代碼操作渺鹦。
