- 什么是 CSS hack
CSS hack就是我們?yōu)榱耸勾a能兼容不同版本的瀏覽器而編寫的關(guān)于瀏覽器兼容的語句。CSS hack具有三種具體的表現(xiàn)形式：選擇器前綴法症杏、CSS屬性前綴法黄痪、IE條件注釋法圾旨。前綴法就是使用一些特定瀏覽器才能識(shí)別的具有前綴的語句去編寫代碼處理兼容性的問題妙黍。如IE6能識(shí)別選擇器和屬性前帶有前綴_（下劃線）稚铣，IE6衰伯、7能識(shí)別選擇器和屬性前帶有前綴*铡羡。IE條件注釋法就是在html文件開頭加上注釋樣式的條件判斷語句，這些語句能被IE瀏覽器識(shí)別意鲸，從而選出適應(yīng)的代碼烦周。
- 談一談瀏覽器兼容的思路
首先需要分析的是到底要不要處理瀏覽器兼容的問題，這需要從產(chǎn)品的角度和成本的角度去分析怎顾。產(chǎn)品的角度需要分析產(chǎn)品的受眾群读慎，受眾群使用的瀏覽器以及對于受眾群重視的是功能還是外觀；成本的角度需要分析實(shí)現(xiàn)某種兼容功能需要付出的人力和時(shí)間槐雾，如果成本太大可放棄兼容性夭委。
其次需要分析的是哪些效果需要兼容，要兼容到瀏覽器的哪個(gè)版本募强，主要考慮的就是IE瀏覽器株灸，如一些功能需要兼容到IE的第幾個(gè)版本崇摄。
確認(rèn)了需要兼容到IE幾之后就是根據(jù)這個(gè)兼容需求去選擇兼容的庫、框架和兼容工具慌烧，最后再使用一些條件注釋和CSShack做修補(bǔ)逐抑。
- 列舉5種以上瀏覽器兼容的寫法
- 由于IE6、7無法識(shí)別:after這樣的偽類元素屹蚊，故代碼中使用前綴加*的方式對IE6厕氨、7使用建立BFC，從而清除浮動(dòng)淑翼。
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對ie67有效 */
}
- 由于IE6腐巢、7無法識(shí)別display:inline-block這樣的語句，故前綴加的代碼設(shè)置了一個(gè)類似display:inline-block的效果玄括，而前綴加的語句只有IE6冯丙、7能識(shí)別，從而解決兼容的問題
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
- 下面為IE條件注釋語句遭京，意思為如果IE版本低于IE9胃惜，則加載下面兩個(gè)JS文件，這兩個(gè)JS文件可以解決html5標(biāo)簽和媒體查詢不兼容的問題哪雕。
<!--[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]-->
- 下面也是IE條件判斷語句船殉，意思是如果版本為IE7，則加載ie7.css樣式表斯嚎。
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
- 下面也是IE條件判斷語句利虫，通過判斷IE的版本號(hào)給html標(biāo)簽加上各種類名，這些類名可在html文件中使用堡僻，從而創(chuàng)建專門適用于某種IE版本的代碼糠惫，從而解決兼容的問題。
<!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]-->
- 以下工具/名詞是做什么的
- 條件注釋
條件注釋是一些在IE中具有條件語句的功能钉疫，而在別的瀏覽器中會(huì)被當(dāng)成注釋的語句硼讽，如<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->，此語句就是條件注釋牲阁。
- IE Hack
IE hack就是一些只能被IE識(shí)別的語句固阁，如選擇器或者CSS屬性前加上*或者_(dá)，這種語句只能被IE的某些瀏覽器識(shí)別城菊，這種寫法就是IE hack备燃。
- js 能力檢測
js能力檢測指的是，js對于瀏覽器兼容問題上采用的判斷方式是是否具有這個(gè)方法或?qū)傩粤杌＃绻哂袆t兼容赚爵，沒有就是不兼容。這種能力檢測的方式較為簡單，不需要繁雜的版本確認(rèn)冀膝。
- html5shiv.js
這個(gè)JS文件使用于那些不支持html5的瀏覽器，作用是將html5標(biāo)簽轉(zhuǎn)化為那些老版本瀏覽器也能識(shí)別的標(biāo)簽霎挟，從而實(shí)現(xiàn)兼容窝剖。
- respond.js
這個(gè)JS文件使用于那些不支持媒體查詢的瀏覽器，作用是將媒體查詢語句轉(zhuǎn)化為那些老版本瀏覽器也能識(shí)別的語句酥夭，從而實(shí)現(xiàn)媒體查詢在老版本瀏覽器上的兼容赐纱。
- css reset
css reset指的是將瀏覽器中對某種元素的默認(rèn)樣式通通重置，從而消除那些由于瀏覽器默認(rèn)樣式不一致而出現(xiàn)的兼容性問題熬北。
- normalize.css
normalize.css是一個(gè)css文件疙描，加載它可以得到不同的瀏覽器對于默認(rèn)樣式的相同規(guī)范，不同于css reset的是normalize.css沒有將瀏覽器的默認(rèn)樣式通通重置讶隐，而是將默認(rèn)樣式分類起胰，沒有用的清零，有用的采用統(tǒng)一的值巫延，從而消除那些由于瀏覽器默認(rèn)樣式不一致而出現(xiàn)的兼容性問題效五。
- Modernizr
Modernizr.js是一個(gè)js文件，它采用了JS能力檢測的思想炉峰，作用是對當(dāng)前瀏覽器逐一判斷某種功能能不能實(shí)現(xiàn)畏妖，能就在html標(biāo)簽加上class="xxx"，不能就在html上加上class="no-xxx"疼阔，從而使html標(biāo)簽具有很多類名戒劫，前端工程師編寫代碼時(shí)可以使用這些類寫出不同的代碼分支，從而解決兼容性問題婆廊。
- postCSS
postCSS是一個(gè)平臺(tái)迅细，在這個(gè)平臺(tái)上可以安裝各種各樣強(qiáng)大的插件，插件可以幫你把普通的CSS轉(zhuǎn)換為兼容XX版本的CSS否彩，從而實(shí)現(xiàn)解決兼容性的問題疯攒。
如：PostCSS插件Autoprefixer為CSS補(bǔ)全瀏覽器前綴
PostCSS插件CSS Grace讓CSS兼容舊版IE
- 一般在哪個(gè)網(wǎng)站查詢屬性兼容性？
caniuse.com 這個(gè)網(wǎng)站可以查詢到屬性在各個(gè)瀏覽器版本的兼容性列荔。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
