聊一聊浏览器兼容

什么是兼容问题

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

  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-浏览器兼容— 饥人谷 ,比较简略,但用来学习理解浏览器兼容足够了。

作者:若愚

35 thoughts on “聊一聊浏览器兼容”

  1. I just like the valuable info you supply on your articles. I will bookmark your blog and take a look at once more right here frequently. I am reasonably certain I’ll be informed many new stuff proper here! Best of luck for the following!|

  2. I’m impressed, I have to admit. Rarely do I encounter a blog that’s both equally educative and engaging, and let me tell you, you have hit the nail on the head. The issue is something which too few men and women are speaking intelligently about. I’m very happy that I stumbled across this in my search for something regarding this.|

  3. Pretty great post. I simply stumbled upon your weblog and wanted to say that I have truly loved browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again very soon!|

  4. Superb blog! Do you have any recommendations for aspiring writers? I’m hoping to start my own website soon but I’m a little lost on everything. Would you suggest starting with a free platform like WordPress or go for a paid option? There are so many choices out there that I’m completely overwhelmed .. Any recommendations? Cheers!|

  5. Hello! I’ve been reading your web site for some time now and finally got the courage to go ahead and give you a shout out from Houston Texas! Just wanted to say keep up the good work!|

  6. Nice post. I was checking constantly this blog and I’m impressed! Extremely useful info particularly the last part 🙂 I care for such information a lot. I was looking for this certain information for a long time. Thank you and best of luck.|

  7. I’m not that much of a online reader to be honest but your sites really nice, keep it up! I’ll go ahead and bookmark your website to come back down the road. Cheers|

  8. Hello, i think that i noticed you visited my web site so i got here to go back the prefer?.I am attempting to to find issues to improve my site!I guess its good enough to use a few of your ideas!!|

  9. It’s a pity you don’t have a donate button! I’d without a doubt donate to this superb blog! I guess for now i’ll settle for book-marking and adding your RSS feed to my Google account. I look forward to brand new updates and will share this website with my Facebook group. Talk soon!|

  10. I’m not sure where you’re getting your information, but good topic. I needs to spend some time learning much more or understanding more. Thanks for wonderful information I was looking for this info for my mission.|

  11. Do you have a spam issue on this site; I also am a blogger, and I was curious about your situation; we have created some nice methods and we are looking to swap techniques with others, be sure to shoot me an email if interested.|

发表评论

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