浅析浏览器兼容

浅析浏览器兼容

在开发中我们有时会不得不面对浏览器兼容的问题，下面就是作者对于浏览器兼容知识的浅析。

浏览器兼容问题的两种处理思路

1. 渐进增强：使用版本低的浏览器开发页面，先实现一定要实现的基本功能，然后在此基础上针对高级的浏览器进行改进和优化。
2. 优雅降级：使用高级的浏览器进行开发页面，之后再对低级浏览器进行兼容。

处理兼容问题的手段

1. 选择合适的框架

• Bootstrap (>=IE8)
• JQuery 1.~ (>=IE6)
• JQuery 2.~ (>=IE9)
• Vue (>=IE9)
• ...

2. 条件注释

IE在老版本中对于注释有特定的规则，满足某种写法，那么注释是可以识别的。

something

写法	范例	说明
!	[if !IE]	非IE
lt	[if lt IE 5.5]	小于IE5.5
lte	[if lte IE 6]	小于等于IE6
gt	[if gt IE 5]	大于IE5
gte	[if gte IE 7]	大于等于IE7

3. 常见的属性兼容情况

• inline-block：>= IE8
• min-width/min-height：>= IE8
• :before：>= IE8
• :after：>= IE8
• div:hover：>= IE7
• background-size：>= IE9
• 圆角：>= IE9
• 阴影：>= IE9
• 动画/渐变：>= IE10

4. CSS hack

针对不同的浏览器对于css的解析不同，来写不同的css来达成我们兼容的目的。

• 属性前缀法

  IE6能识别属性名中带_和*，IE7能识别*，但不能识别_。IE6~9能识别\9

  .box {
    color: red;
    _color: blue; /* IE6 */
    *color: pink; /* IE6 and IE7 */
    color: yellow\9; /* IE/edge 6-8 */
  }
  

  .clearfix:after {
    content: '';
    display: block;
    clear: both;
  }
  .clearfix {
    *zoom: 1; /* IE67 清除浮动*/
  }
  

  .target {
    display: inline-block; /* IE8以上 */
    /* 以下两句可以大致模仿出inline-block的特性 */
    *display: inline;
    *zoom: 1;
  }
  

• 选择器前缀法

• IE条件注释法

一些兼容相关的开发利器

1. Can I use 可查询某个属性在不同浏览器上的支持情况

不同浏览器对于inline-block的支持情况

​

2. 一些工具
   • html5shiv.js
   • css reset
   • normalize.css
   • respond.js
   • Modernizr
3. 如何调试老IE
   • 安装虚拟机
   • 没有检查元素，那就给元素添加边框以便观察，完成后再去掉