1.什么是 CSS hack?
CSS hack由于不同廠商的瀏覽器熊泵，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等末秃，或者是同一廠商的瀏覽器的不同版本冷冗，如IE6和IE7主经，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣颈走，得不到我們所需要的頁面效果硬纤。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS解滓，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果筝家。
2.談一談瀏覽器兼容的思路洼裤。
要不要做
- 產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例溪王、效果優(yōu)先還是基本功能優(yōu)先）
- 成本的角度 (有無必要做某件事)
做到什么程度
- 讓哪些瀏覽器支持哪些效果
如何做
- 根據(jù)兼容需求選擇技術框架/庫(jquery)
- 根據(jù)兼容需求選擇兼容工具(html5shiv.js腮鞍、respond.js值骇、css reset、normalize.css移国、Modernizr)postCSS
- 條件注釋吱瘩、CSS Hack、js 能力檢測做一些修補
3.列舉5種以上瀏覽器兼容的寫法迹缀。
1.條件注釋
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![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
2.屬性選擇器
box{
color: red;
_color: blue; /ie6/
color: pink; /ie67/
color: yellow\9; /ie/edge 6-8*/
}
- 選擇器前綴法
*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效等等
4.條件注釋結合類選擇器整體優(yōu)化
<!DOCTYPE html>
<html dir="ltr" lang="en-US" class="no-js">
- 利用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;
}
4.以下工具/名詞是做什么的
條件注釋
條件注釋 是于HTML源碼中被 IE 有條件解釋的語句缕允。條件注釋可被用來向 IE提供及隱藏代碼峡扩。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn)蹭越，并且直至 Internet Explorer 9 均支持障本。微軟已宣布于IE10停止支持。
IE Hack
針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程
js 能力檢測
瀏覽器的能力檢測目標不是檢測特定的瀏覽器响鹃，而是檢測瀏覽器的能力驾霜。這樣，只需要檢測瀏覽器是否支持特定的能力买置，就可以給出特定的解決方案粪糙。這一部分檢測是解決瀏覽器兼容問題的主要檢測。
html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別忿项，并導致CSS不起作用的問題蓉冈。所以我們在使用過程中，想要讓低版本的瀏覽器轩触，即IE9以下的瀏覽器支持寞酿，那么這款html5shiv.js是一個非常好的選擇！
respond.js
Respond.js 是一個小腳本脱柱，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性伐弹，實現(xiàn)響應式網(wǎng)頁設計。
css reset
將瀏覽器的默認樣式全部去掉榨为，更準確說就是通過重新定義標簽樣式惨好』蛙睿“覆蓋”瀏覽器的CSS默認屬性。最最簡單的說法就是把瀏覽器提供的默認樣式覆蓋掉日川！這就是CSS reset蔓腐。
normalize.css
Normalize.css 是一個可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一龄句。
它可以：
保留有用的默認值合住，不同于許多 CSS reset 的簡單粗暴。
標準化的樣式撒璧，適用范圍廣的元素透葛。
糾正錯誤和常見的瀏覽器的不一致性。
一些細微的改進卿樱，提高了易用性僚害。
使用詳細的注釋來解釋代碼。
Modernizr
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS繁调，無論瀏覽器是否支持這些特性萨蚕。這是處理漸進增強的完美方案。
Modernizr 會在頁面加載后立即檢測特性蹄胰；然后創(chuàng)建一個包含檢測結果的 JavaScript 對象岳遥，同時在 html 元素加入方便你調(diào)整 CSS 的 class 名。
postCSS
它可以被理解為一個平臺裕寨，可以讓一些插件在上面跑浩蓉，它提供了一個解析器，可以將CSS解析成抽象語法樹宾袜，通過PostCSS這個平臺捻艳，我們能夠開發(fā)一些插件，來處理CSS庆猫。熱門插件如autoprefixer认轨，它可以幫我們處理兼容問題，只需正常寫CSS月培，autoprefixer可以幫我的自動生成兼容性代碼
5.一般在哪個網(wǎng)站查詢屬性兼容性嘁字？
caniuse :查css屬性 選擇器在各瀏覽器的兼容。
browserhacks:查css屬性 選擇器在各瀏覽器Hack的寫法
