1.什么是 CSS hack?
由于不同廠(chǎng)商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠(chǎng)商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
2.談一談瀏覽器兼容的思路
- 首先從產(chǎn)品角度出發(fā)，考慮產(chǎn)品的受眾、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先。
（列如銀行和政府部門(mén)，需要保證其能讓絕大部分的瀏覽器都能使用，就需優(yōu)先考慮基本功能。而一些列如游戲，動(dòng)漫網(wǎng)站的受眾較為年輕，使用瀏覽器的版本較新，此時(shí)應(yīng)考慮從效果出發(fā)。）
- 然后再考慮做這些功能的收益與成本是否成比例。
- 考慮兼容哪些瀏覽器至哪些版本，支持哪些效果。
- 考慮漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)間的選擇（在時(shí)間較為緊迫的情況下，考慮優(yōu)雅降級(jí)）
- 根據(jù)兼容需求選擇技術(shù)框架/庫(kù)
(Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9) - 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS - 條件注釋、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)
3.列舉5種以上瀏覽器兼容的寫(xiě)法
1.條件注釋
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
項(xiàng)目 范例 說(shuō)明
！ [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.屬性選擇器
常見(jiàn)的屬性兼容情況：inline-blcok:>=ie8，min-width：>=ie8，:before:after:>=ie8 ,div:hover>=ie8, background-size: >=ie9,圓角：>=ie9，陰影：>=ie9，動(dòng)畫(huà)漸變：>=ie10
box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
3.選擇器前綴法
*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有效等等
4.條件注釋結(jié)合類(lèi)選擇器整體優(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]-->
5.利用Modernizr工具
運(yùn)行的時(shí)候它會(huì)在html元素上添加一批CSS的class名稱(chēng)，這些class名稱(chēng)標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性，支持的特性就直接顯示該天特性的名稱(chēng)作為一個(gè)class（例:canvas,websockets），不支持的特性顯示的class是“no-特性名稱(chēng)”。以下是IE9下生成的特征類(lèi)型。
<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名稱(chēng)，在你的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 有條件解釋的語(yǔ)句。條件注釋可被用來(lái)向 IE提供及隱藏代碼。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn)，并且直至 Internet Explorer 9 均支持。微軟已宣布于IE10停止支持。
- IE Hack
針對(duì)IE瀏覽器編寫(xiě)不同的CSS的讓IE能夠正常渲染的過(guò)程
- js 能力檢測(cè)
瀏覽器的能力檢測(cè)目標(biāo)不是檢測(cè)特定的瀏覽器，而是檢測(cè)瀏覽器的能力。這樣，只需要檢測(cè)瀏覽器是否支持特定的能力，就可以給出特定的解決方案。這一部分檢測(cè)是解決瀏覽器兼容問(wèn)題的主要檢測(cè)。
- html5shiv.js
用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別，并導(dǎo)致CSS不起作用的問(wèn)題。所以我們?cè)谑褂眠^(guò)程中，想要讓低版本的瀏覽器，即IE9以下的瀏覽器支持，那么這款html5shiv.js是一個(gè)非常好的選擇！
- respond.js
Respond.js 是一個(gè)小腳本，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢(xún)功能的瀏覽器提供媒體查詢(xún)的 min-width 和 max-width 特性，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。
- css reset
將瀏覽器的默認(rèn)樣式全部去掉，更準(zhǔn)確說(shuō)就是通過(guò)重新定義標(biāo)簽樣式。“覆蓋”瀏覽器的CSS默認(rèn)屬性。最最簡(jiǎn)單的說(shuō)法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉！這就是CSS reset。
- normalize.css
Normalize.css 是一個(gè)可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁(yè)元素的時(shí)候形式更統(tǒng)一。
它可以：
保留有用的默認(rèn)值，不同于許多 CSS reset 的簡(jiǎn)單粗暴。
標(biāo)準(zhǔn)化的樣式，適用范圍廣的元素。
糾正錯(cuò)誤和常見(jiàn)的瀏覽器的不一致性。
一些細(xì)微的改進(jìn)，提高了易用性。
使用詳細(xì)的注釋來(lái)解釋代碼。
- Modernizr
Modernizr 使你可以方便地為各種情況編寫(xiě) JavaScript 和 CSS，無(wú)論瀏覽器是否支持這些特性。這是處理漸進(jìn)增強(qiáng)的完美方案。
Modernizr 會(huì)在頁(yè)面加載后立即檢測(cè)特性；然后創(chuàng)建一個(gè)包含檢測(cè)結(jié)果的 JavaScript 對(duì)象，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名。
- postCSS
它可以被理解為一個(gè)平臺(tái)，可以讓一些插件在上面跑，它提供了一個(gè)解析器，可以將CSS解析成抽象語(yǔ)法樹(shù)，通過(guò)PostCSS這個(gè)平臺(tái)，我們能夠開(kāi)發(fā)一些插件，來(lái)處理CSS。熱門(mén)插件如autoprefixer，它可以幫我們處理兼容問(wèn)題，只需正常寫(xiě)CSS，autoprefixer可以幫我的自動(dòng)生成兼容性代碼
