什么是CSS hack？
不同瀏覽器，或者相同瀏覽器的不同版本，對(duì)CSS的解析可能不同，導(dǎo)致頁(yè)面展現(xiàn)效果不一致。為了達(dá)到預(yù)期的展現(xiàn)效果，我們需要對(duì)不同瀏覽器的某些樣式寫(xiě)不同的CSS。
CSS hack 的三種常見(jiàn)方法
條件注釋。
主要針對(duì)的是IE瀏覽器，因?yàn)镮E瀏覽器（x-9）可以“讀懂”注釋里面的一些暗語(yǔ)，通過(guò)條件限制，就可以選擇在什么樣的情況下，讀取不一樣的CSS。（IE10不支持)選擇器前綴。
通過(guò)瀏覽器的某些版本的一些BUG，可以識(shí)別CSS非標(biāo)準(zhǔn)寫(xiě)法。據(jù)此，我們可以對(duì)導(dǎo)致不兼容的css 寫(xiě)法進(jìn)行重寫(xiě)，就可以覆蓋前面的展現(xiàn)效果。屬性前綴
同瀏覽器前綴， IE6 可以識(shí)別" _ "和“ * ”，IE7 可以識(shí)別 “ * ”，IE6-10可以識(shí)別 “\9” 。
談一談瀏覽器兼容的思路。
- 要不要去兼容？
首先，需要知道產(chǎn)品定位是什么，針對(duì)什么樣的人群？必須針對(duì)所有用戶(hù)，還是只是針對(duì)特定人群？是否有無(wú)必要為了少部分人群來(lái)增加成本？
- 兼容到什么程度？
必須展現(xiàn)與最新瀏覽器展現(xiàn)一樣的效果？還是說(shuō)只兼顧到部分效果？還是最低層次的滿(mǎn)足基本使用功能，不出現(xiàn)排版混亂？
- 用什么樣的方式去兼容？
漸進(jìn)增強(qiáng)？還是優(yōu)雅降級(jí)？
- 選擇合適的庫(kù)及工具，實(shí)現(xiàn)兼容
選擇好整體方法及思路以后，就可以選擇合適的庫(kù)，針對(duì)不同的問(wèn)題，采取不同的方法來(lái)處理兼容性問(wèn)題了。
列出5種以上瀏覽器兼容的寫(xiě)法。
- 條件注釋。
<!--[if IE 6]-->
<p>adfad</p>
<![endif]-->//如果是IE6 就會(huì)有<p>
<!--[if !IE]--><!-->
####
<!--<![endif]-->//如果不是IE
常見(jiàn)的有
[if !IE]//如果不是IE.
[if lt IE 5.5]//如果小于IE5.5版本
[if lte IE 6]//如果小于等于IE 6版本
[if gt IE 7]//如果大于IE 7版本
[if gte IE 8]//若果大于等于IE 8版本
[if (IE 6)|(IE 7)]//如果是IE 6 或者 IE 7
- 屬性前綴
.box {
color:red;
color:pink\9;
*color:blue;
_color:yellow;
}
ie 6 黃色，IE 7藍(lán)色，IE8-10粉色，其他紅色。
-webkit- ，針對(duì)safari，chrome瀏覽器的內(nèi)核CSS寫(xiě)法
-moz-，針對(duì)firefox瀏覽器的內(nèi)核CSS寫(xiě)法
-ms-，針對(duì)ie內(nèi)核的CSS寫(xiě)法
-o-，針對(duì)Opera內(nèi)核的CSS寫(xiě)法
- 選擇器前綴
*.clear {}只有IE6和IE7可以識(shí)別這個(gè)選擇器。
以下工具/名詞是做什么的?
條件注釋
CSS hack的一種方式，處理IE10以下的兼容性問(wèn)題的一種方法。IE hack
針對(duì)IE瀏覽器，寫(xiě)不同的CSS ，讓IE瀏覽器展現(xiàn)開(kāi)發(fā)人員想要的頁(yè)面。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)題。respond.js
用于為 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)簽樣式?！案采w”瀏覽器的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，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)生成兼容性代碼。
查詢(xún)屬性兼容性
caniuse.com 兼容性查詢(xún)
browserhacks.com hack寫(xiě)法
