什么是 CSS hack
- 由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。
- 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
談一談瀏覽器兼容的思路
要不要做
產品的角度（產品的受眾、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
成本的角度 (有無必要做某件事)
做到什么程度
讓哪些瀏覽器支持哪些效果
如何做
根據兼容需求選擇技術框架/庫(jquery)
根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
條件注釋、CSS Hack、js 能力檢測做一些修補
列舉5種以上瀏覽器兼容的寫法
常見屬性的兼容情況
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圓角: >= ie9
陰影: >= ie9
動畫/漸變: >= ie10寫法
清除浮動
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對ie67有效 */
}
- 利用inline-block
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
- 利用html5shiv、respond
<!--[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]-->
<!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]-->
- 屬性前綴
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
- 條件注釋
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
以下工具/名詞是做什么的
條件注釋：
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中無法正常工作。 IE10不再支持條件注釋IE Hack：
使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼，有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法。CSS屬性前綴法： 比如IE6能識別下劃線和星號*，IE7能識別星號 *，但不能識別下劃線，而firefox兩個都不能認識。
選擇器前綴法： 比如IE6能識別html .class{}，IE7能識別+html .class{}或者*:first-child+html .class{}。
HTML頭部引用(if IE)Hack：
針對所有IE：```，針對IE6及以下版本：，這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。
書寫順序： 一般是將識別能力強的瀏覽器的CSS寫在前面。瀏覽器優(yōu)先級別：FF < IE7 < IE6，CSS hack書寫順序一般為FF IE7 IE6。js 能力檢測：
檢測瀏覽器的能力(而不是檢測瀏覽器的種類)，根據檢測到的瀏覽是否具有特定的能力，來制定具體的解決方案。html5shiv.js：
The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.respond.js：
A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)css reset：
因為早期的瀏覽器支持和理解的CSS規(guī)范不同，導致渲染頁面時效果不一致，會出現很多兼容性問題。所以才會產生css reset 的問題。normalize.css：
Normalize.css 只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS Reset，Normalize.css是一種現代的、為HTML5準備的優(yōu)質替代方案。Normalize.css現在已經被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網站上。Modernizr：
Modernizr是一個檢測用戶瀏覽器HTML5和CSS3能力的JavaScript庫。Modernizr在頁面加載時快速運行來檢測功能；之后它會創(chuàng)建一個保存檢測結果的JavaScript對象，然后為你頁面中的html標簽上添加一系列class屬性來接通你的CSS。
Modernizr支持大量的測試和可選地包括YepNope.js來視情況加載外部的js和css資源。postCSS：
postCSS是使用JS插件來轉換CSS的工具，支持變量、混入、未來 CSS語法、內聯(lián)圖像等。PostCSS使CSS變成JavaScript的數據，使它變成可操作。PostCSS是基于JavaScript插件，然后執(zhí)行代碼操作。PostCSS自身并不會改變CSS，它只是一種插件，為執(zhí)行任何的轉變鋪平道路。
