1.什么是 CSS hack
由于不同廠商的瀏覽器耻台，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等嵌削，或者是同一廠商的瀏覽器的不同版本雳窟，如IE6和IE7表窘，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣堕油，得不到我們所需要的頁面效果潘飘。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果掉缺。這個針對不同的瀏覽器寫不同的CSS code的過程卜录，就叫CSS hack。
2.談一談瀏覽器兼容的思路
- 首先根據(jù)產品的角度（產品的受眾眶明、受眾的瀏覽器比例艰毒、效果優(yōu)先還是基本功能優(yōu)先）與成本的角度 (有無必要做某件事)考慮需求要不要做。
- 考慮做到什么程度赘来，需要哪些效果，支持哪些瀏覽器胧弛。
- 開始根據(jù)需求著手去做
根據(jù)兼容需求選擇技術框架/庫(jquery)
根據(jù)兼容需求選擇兼容工具(html5shiv.js凹耙、respond.js、css reset冰单、normalize.css、Modernizr)
postCSS
條件注釋灸促、CSS Hack诫欠、js 能力檢測做一些修補 - 漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面，保證最基本的功能浴栽，然后再針對高級瀏覽器進行效果荒叼、交互等改進和追加功能達到更好的用戶體驗
- 優(yōu)雅降級 (graceful degradation): 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容典鸡。
3.列舉5種以上瀏覽器兼容的寫法
- 條件注釋法
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句被廓。條件注釋可被用來向IE提供及隱藏代碼。IE10之后不再支持條件注釋萝玷。
<!--[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]-->
<p>You are using Internet Explorer 6.</p>這句只有瀏覽器為ie6時才會起作用嫁乘。
<script>alert(1);</script>這句只有瀏覽器不是IE時才起作用。
- CSS屬性前綴法
屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線""和星號" * "球碉，IE7能識別星號" * "蜓斧，但不能識別下劃線""，IE6~IE10都認識"\9"睁冬，但firefox前述三個都不能認識
.box{
color: red; 各瀏覽器均能識別
_color: blue; /*ie6*/只有ie6能識別
*color: pink; /*ie67*/只有ie6或ie7能識別
color: yellow\9; /*ie/edge 6-8*/只有ie6-9能識別
}
選擇器前綴法
選擇器前綴法是針對一些頁面表現(xiàn)不一致或者需要特殊對待的瀏覽器挎春，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。
目前最常見的是
*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有效瀏覽器內核前綴
-webkit- 豆拨，針對safari直奋，chrome瀏覽器的內核CSS寫法
-moz-，針對firefox瀏覽器的內核CSS寫法
-ms-施禾，針對ie內核的CSS寫法
-o-帮碰，針對Opera內核的CSS寫法
.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
- 使用Modernizr
使用Modernizr識別瀏覽器對各屬性的兼容性。在不兼容的情況下補上特定的兼容樣式以保證網(wǎng)頁的可讀性拾积。
添加完Modernizr引用以后殉挽，它就立即生效了。運行的時候它會在html元素上添加一批CSS的class名稱拓巧，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性斯碌，支持的特性就直接顯示該天特性的名稱作為一個class（例如:canvas,websockets），不支持的特性顯示的class是“no-特性名稱”（例如：no-flexbox）肛度。
下面這段代碼是運行在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">
no-開頭的便是瀏覽器不支持的特性傻唾。
.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;
}
可以像這樣為no-boxshadow定義兼容樣式，當瀏覽器不支持boxshadow特性時，便會使用兼容樣式代替冠骄。
4.以下工具/名詞是做什么的
- 條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句伪煤。條件注釋可被用來向IE提供及隱藏代碼×堇保可以通過條件注釋使某些代碼僅被某些特定瀏覽器解析抱既，從而解決瀏覽器兼容問題。 - IE Hack
針對ie瀏覽器的css hack扁誓。
#hack{
color:red; /* 所有瀏覽器都支持 */
color:red !important;/* 除IE6外 */
_color:red; /* IE6支持 */
*color:red; /* IE6防泵、IE7支持 */
+color:red;/*IE7支持*/
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7蝗敢、IE8捷泞、IE9支持 */
color:red\0; /* IE8、IE9支持 */
color:red\9\0;/*IE9支持*/
}
- js 能力檢測
瀏覽器提供商雖然在實現(xiàn)公共接口方面投入了很多精力寿谴，但結果仍然是每一種瀏覽器都有各自的長處锁右，也都有各自的缺點。即使是那些跨平臺的瀏覽器讶泰，雖然從技術上看版本相同骡湖，也照樣存在不一致性問題。面對普遍存在的不一致性問題峻厚，開發(fā)人員要么采取遷就各方的“最小公分母”策略，要么（也是更常見的）就得利用各種客戶端檢測方法谆焊，來突破或者規(guī)避種種局限性惠桃。
能力檢測的目標不是識別特定的瀏覽器，而是識別瀏覽器的能力辖试。采用這種方式不必顧及特定的瀏覽器如何如何辜王，只要確定瀏覽器支持特定的能力，就可以給出解決方案罐孝。 - html5shiv.js
htnl5shiv主要解決HTML5提出的新的元素不被IE6-8識別呐馆，這些新元素不能作為父節(jié)點包裹子元素，并且不能應用CSS樣式莲兢。讓CSS 樣式應用在未知元素上只需執(zhí)行document.createElement(elementName) 即可實現(xiàn)汹来。html5shiv就是根據(jù)這個原理創(chuàng)建的。 - respond.js
通過加載此js文件可以在ie678環(huán)境下模擬css3的媒體查詢功能改艇。適用于響應式開發(fā)收班。 - css reset
每個瀏覽器默認樣式不同，通過css reset可以清除瀏覽器默認樣式谒兄，再進行樣式的添加摔桦，可以使頁面在各瀏覽器上的顯示效果趨于一致。 - normalize.css
Normalize.css 只是一個很小的CSS文件承疲，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性邻耕。相比于傳統(tǒng)的CSS Reset鸥咖，Normalize.css是一種現(xiàn)代的、為HTML5準備的優(yōu)質替代方案兄世。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap啼辣、HTML5 Boilerplate、GOV.UK碘饼、Rdio熙兔、CSS Tricks 以及許許多多其他框架、工具和網(wǎng)站上艾恼。
Normalize.css做了以下幾件事：
保護有用的瀏覽器默認樣式而不是完全去掉它們
為大部分HTML元素提供一般化的樣式
修復瀏覽器自身的bug并保證各瀏覽器的一致性
用一些小技巧優(yōu)化CSS可用性
用注釋和詳細的文檔來解釋代碼 - Modernizr
從實際操作來看住涉，Modernizr默認做的事情很少，除了（在你選擇的情況下）給不支持html5的標簽的瀏覽器钠绍，如IE6舆声，7，8追加一點由Remy Sharp開發(fā)的html5墊片腳本柳爽，使其識別<aside>媳握、<section>等html5元素之外，它主要做的就是瀏覽器‘功能檢測’磷脯。
因此蛾找，它知道瀏覽器是否支持各種html5和css3特性。 - postCSS
PostCSS 是一個樣式處理工具赵誓。PostCSS 旨在通過自定義的插件和工具生態(tài)體系來重新定義 CSS打毛。與類似 Sass 和 LESS 這樣的預處理機制類似，它可以把擴展的語法和功能轉換成現(xiàn)代的瀏覽器友好的 CSS 代碼俩功。
5.一般在哪個網(wǎng)站查詢屬性兼容性幻枉？
http://caniuse.com
