聊一聊浏览器兼容

什么是兼容问题

同一份代码,有的浏览器效果『正常』,有的『不正常』

  1. 不正常的原因是什么?(不支持? bug?)
  2. 如何让它展示正常?(条件注释? 单独Hack?)

为什么会有浏览器兼容问题

  1. 同一浏览器,版本越老 bug 越多
  2. 同一浏览器,版本越新,支持的特性越多
  3. 不同浏览器,标准不同,实现方式也有差异

处理兼容问题的思路

  • 要不要做
    产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)
    成本的角度 (有无必要做某件事)
  • 做到什么程度
    让哪些浏览器支持哪些效果
  • 如何做
    根据兼容需求选择技术框架/库(如jquery 1.x.x)
    根据兼容需求选择兼容工具:html5shiv、Respond.js、CSS Reset、normalize.css、Modernizr.js、 postcss
    条件注释、CSS Hack、js 能力检测做一些修补

渐进增强和优雅降级

  • 渐进增强(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: >=ie8
  • min-width/min-height: >=ie7
  • :before,:after: >=ie8
  • div:hover: >=ie7
  • inline-block: >=ie8
  • background-size: >=ie9
  • 圆角: >= ie9
  • 阴影: >= ie9
  • 动画/渐变: >= ie10

一些兼容写法范例

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 仅对ie67有效,zoom:1触发hasLayout,起到类似BFC的效果 */
}
.target{
  display: inline-block;
  *display: inline; /*仅对ie67生效*/
  *zoom: 1; /*仅对ie67生效*/
}
<!--[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]-->
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html  class="no-js ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html  class="no-js"><!--<![endif]-->

一些和兼容相关的工具/库

特别是Modernizr.jspostcss 很有实践价值,值得好好看看用法。

用到的网站

这篇文章原文来自我的课程 ppt CSS-浏览器兼容— 饥人谷 ,比较简略,但用来学习理解浏览器兼容足够了。

作者:若愚

发表评论

电子邮件地址不会被公开。