兼容問題

同一代碼，有的瀏覽器效果正常，有的不正常；瀏覽器不同版本顯示不同。

兼容出現(xiàn)原因

1. 同一瀏覽器，版本越就BUG越多
2. 不同瀏覽器，標(biāo)準(zhǔn)不一樣

處理兼容的方法

條件注釋

在HTML引入條件注釋，可以被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]-->

IE 10 以上的瀏覽器解析<script>alert(1);</script>
IE6 瀏覽器 會顯示P標(biāo)簽，IE8會引入e8only.css，IE7和IE9則什么都沒效果

CSS hack

利用瀏覽器的BUG來處理想要的CSS效果
CSS Hack大致CSS屬性前綴法、選擇器前綴法
比如

  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow\9;  /*ie/edge 6-8*/

更多hack寫法

使用各種工具

1. jQuery 1.x 版本支持IE6以上瀏覽器
2. Vue支持IE9以上瀏覽器
3. html5shiv.js 處理IE瀏覽器不能使用HTML5 標(biāo)簽，配套使用條件注釋
   4.respond.js 處理IE瀏覽器不能使用CSS 的media查詢功能
   5.css reset 重設(shè)默認(rèn)樣式
   6.normalize.css 讓頁面的默認(rèn)樣式在各個瀏覽器下保持一致

常見的屬性兼容情況

inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
background-size: >=ie9
圓角: >= ie9
陰影: >= ie9
動畫/漸變: >= ie10
rgba>=ie9  //IE6-8 filter
opacity >=ie9