什么是 CSS hack
- 由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等红选，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣粟矿，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果璧针。
- 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS嚷炉，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
談一談瀏覽器兼容的思路
- 要不要做
- 產品的角度（產品的受眾探橱、受眾的瀏覽器比例申屹、效果優(yōu)先還是基本功能優(yōu)先）
- 成本的角度 (有無必要做某件事)
- 做到什么程度
- 讓哪些瀏覽器支持哪些效果
- 如何做
- 根據(jù)兼容需求選擇技術框架/庫(jquery)
- 根據(jù)兼容需求選擇兼容工具(html5shiv.js绘证、respond.js、css reset哗讥、normalize.css嚷那、Modernizr)
- postCSS
- 條件注釋、CSS Hack杆煞、js 能力檢測做一些修補
漸進增強和優(yōu)雅降級
- 漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面魏宽，保證最基本的功能，然后再針對高級瀏覽器進行效果决乎、交互等改進和追加功能達到更好的用戶體驗
- 優(yōu)雅降級 (graceful degradation): 一開始就構建完整的功能队询，然后再針對低版本瀏覽器進行兼容。
列舉5種以上瀏覽器兼容的寫法
1.瀏覽器兼容問題：塊屬性標簽float后构诚，又有橫行的margin情況下蚌斩，在IE6顯示margin比設置的大
問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?/p>
（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性
備注：我們最常用的就是div+CSS布局了范嘱，而div就是一個典型的塊屬性標簽送膳，橫向布局的時候我們通常都是用div float實現(xiàn)的，橫向的間距設置如果用margin實現(xiàn)丑蛤，這就是一個必然會碰到的兼容性問題叠聋。
2.瀏覽器兼容問題：設置較小高度標簽（一般小于10px），在IE6受裹，IE7中高度超出自己設置高度
問題癥狀：IE6碌补、7里這個標簽的高度不受控制，超出自己設置的高度
解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度名斟。
備注：這種情況一般出現(xiàn)在我們設置小圓角背景的標簽里脑慧。出現(xiàn)這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的砰盐，這個標簽的高度還是會達到默認的行高。
3.瀏覽器兼容問題四：行內屬性標簽坑律，設置display:block后采用float布局岩梳，又有橫行的margin的情況，IE6間距bug
問題癥狀：IE6里的間距比超過設置的間距
解決方案：在display:block;后面加入display:inline;display:table;
備注：行內屬性標簽晃择，為了設置寬高冀值，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局并有橫向的margin后宫屠，在IE6下列疗，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內屬性標簽浪蹂，所以我們再加上display:inline的話抵栈，它的高寬就不可設了告材。這時候我們還需要在display:inline后面加入display:talbe。
4.瀏覽器兼容問題：圖片默認有間距
問題癥狀：幾個img標簽放在一起的時候古劲，有些瀏覽器會有默認的間距斥赋，加了通配符也不起作用。
解決方案：使用float屬性為img布局
備注：因為img標簽是行內屬性標簽产艾，所以只要不超出容器寬度疤剑，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距闷堡。去掉這個間距使用float是正道隘膘。
5.瀏覽器兼容問題：標簽最低高度設置min-height不兼容
問題癥狀：因為min-height本身就是一個不兼容的CSS屬性，所以設置min-height時不能很好的被各個瀏覽器兼容
解決方案：如果我們要設置一個標簽的最小高度200px杠览，需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備注：在B/S系統(tǒng)前端開時棘幸，有很多情況下我們又這種需求。當內容小于一個值（如300px）時倦零。容器的高度為300px误续；當內容高度大于這個值時，容器高度被撐高扫茅，而不是出現(xiàn)滾動條蹋嵌。這時候我們就會面臨這個兼容性問題。
以下工具/名詞是做什么的
- 條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被 Microsoft Internet Explorer 有條件解釋的語句葫隙。條件注釋可被用來向 Internet Explorer 提供及隱藏代碼 - IE Hack
使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼栽烂，有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法 - js 能力檢測
使用JS的語法檢測瀏覽器支持的屬性恋脚，以便展示效果 - html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別腺办，并導致CSS不起作用的問題。 - respond.js
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢糟描。 - css reset
通過重新定義標簽樣式怀喉，“覆蓋”瀏覽器的CSS默認屬性 - normalize.css
Normalize.css 只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性船响。相比于傳統(tǒng)的CSS reset躬拢，Normalize.css是一種現(xiàn)代的、為HTML5準備的優(yōu)質替代方案见间。 - Modernizr
Modernizr是一個 JavaScript 庫聊闯，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性。 - postCSS
PostCSS是一個JS插件轉換樣式表的工具米诉。這些插件能夠檢驗你的CSS菱蔬、支持變量和混合，轉化css3的新特性語法、行內圖片等拴泌。
常見屬性的兼容情況
- inline-block: >=ie8
- min-width/min-height: >=ie8
- :before,:after: >=ie8
- div:hover: >=ie7
- inline-block: >=ie8
- background-size: >=ie9
- 圓角: >= ie9
- 陰影: >= ie9
- 動畫/漸變: >= ie10
一般在哪個網(wǎng)站查詢屬性兼容性魏身？
caniuse.com 查CSS屬性兼容
browserhacks 查 Hack 的寫法
