浏览器兼容

兼容问题

同一代码，有的浏览器效果正常，有的不正常；浏览器不同版本显示不同。

兼容出现原因

1. 同一浏览器，版本越就BUG越多
2. 不同浏览器，标准不一样

处理兼容的方法

条件注释

在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标签，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 标签，配套使用条件注释
   4.respond.js 处理IE浏览器不能使用CSS 的media查询功能
   5.css reset 重设默认样式
   6.normalize.css 让页面的默认样式在各个浏览器下保持一致

常见的属性兼容情况

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