[TOC] ## 兼容性 ### 為什么會有瀏覽器兼容問題 * 同一瀏覽器，版本越老 bug 越多 * 同一瀏覽器，版本越新，支持的特性越多 * 不同瀏覽器，標準不同，實現方式也有差異 ## 漸進增強和優雅降級 * 漸進增強\(progressive enhancement\): 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗 * 優雅降級\`\(graceful degradation\): 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。 ### 具體方法 IE條件注釋 \(conditional comment\) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼，注意：只有 IE9以下的瀏覽器才能識別這種語法，其他瀏覽器僅僅認為 是普通注釋。 ``` <!--[if IE 6]> <p>IE6下 這句生效，在其他瀏覽器下認為是普通注釋</p> <![endif]--> <!--[if !IE]><!--> <script>alert("在 IE 下條件語法生效，但script不執行。在非 IE 下上下兩句都被當做注釋所以當前 script 會執行");</script> <!--<![endif]--> <!--[if IE 8]> <link href="ie8only.css" rel="stylesheet"> <![endif]--> ``` 使用了條件注釋的頁面在ie9 及以前 中可正常工作，但在ie10 以后不再支持。 CSS hack是利用瀏覽器遺留 bug 的原理來識別舊的瀏覽器。 ``` .box{ color: red; _color: blue; /*只有ie6認識*/ *color: pink; /*只有ie67認識*/ color: yellow\9; /*ie瀏覽器都能識別*/ } ``` 以下是一些常見屬性的兼容情況 * inline-block: &gt;=ie8 * min-width/min-height: &gt;=ie7 * :before,:after: &gt;=ie8 * div:hover: &gt;=ie7 * inline-block: &gt;=ie8 * background-size: &gt;=ie9 * 圓角: &gt;= ie9 * 陰影: &gt;= ie9 * 動畫/漸變: &gt;= ie10 ``` <!--[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]--> ``` ## 一些和兼容相關的工具/庫 * [html5shiv](https://zhuanlan.zhihu.com/html5shiv) * [Respond.js](http://link.zhihu.com/?target=https%3A//github.com/scottjehl/Respond) * [CSS Reset](http://link.zhihu.com/?target=https%3A//segmentfault.com/a/1190000003021766) * [normalize.css](http://link.zhihu.com/?target=https%3A//github.com/necolas/normalize.css) * [Modernizr.js](http://link.zhihu.com/?target=https%3A//github.com/Modernizr/Modernizr) * [postcss](http://link.zhihu.com/?target=https%3A//github.com/postcss/postcss) ## 用到的網站 * [瀏覽器市場份額 - 百度統計流量研究院](http://link.zhihu.com/?target=http%3A//#baidu.com/data/browser) * [caniuse.com](http://link.zhihu.com/?target=http%3A//caniuse.com/) 查CSS屬性兼容 * [Browserhacks](http://link.zhihu.com/?target=http%3A//browserhacks.com/) 查 Hack 的寫法