桌面端浏览器兼容性问题总结

这里有一份IE8份额统计数据,数据来源为百度统计所覆盖的超过150万的站点,样本为2017年6月1日-2017年6月30日这一个月的数据:https://baijiahao.baidu.com/s?id=1571935494090406&wfr=spider&for=pc。根据文中数据,可以看到那个时间段里IE8的份额已经降至9.83%,并且由于微软不再对IE8提供支持等原因,IE8份额在过去的一年里一直处于一个下降的趋势中。但是9.83%的份额还没有小到让所有企业都愿意忽略的地步。

首先,IE8以下的浏览器已经退出历史舞台了,IE8的份额虽然越来越低了,但还没有低到可以忽略的程度,另外,为低端浏览器的使用者提供一个基本的可用性的保障应当是我们开发人员的一个责任所在。所以,现在浏览器兼容最低做到IE8就可以了,公司内容的工具类网站做到IE9便已足够。

如果你的网站只需要兼容到IE9,那基本上可以说你是不需要考虑什么兼容性的问题了。IE9+(含IE9)、chrome、firefox等浏览器在前端领域统称为现代浏览器,它们对html5、ES5、CSS3的大部分特性都有较好的支持。

需要说明一点,本文所指的兼容性处理方案,有一类是为了保持相类似的效果,有一类是做优雅降级/渐进增强处理,如果为了保持相类似的效果而为低版本浏览器做一些很吃性能的处理是不如直接做优雅降级的,因为对用户来说,“卡得要死”是最糟糕的。当然,还有一种方案是直接提示用户使用现代浏览器。

处理兼容性问题的终极大招——项目写好后:

  • 在其他浏览器里也打开看看界面效果是否有问题,如果有问题的话审查下元素看下是样式没生效,还是样式有问题;
  • 再点点按钮,看看控制台是否有报错,如果有报错,排除掉逻辑性问题后基本就是JS的兼容性问题了,而很多兼容性问题就是缺少polyfill,去MDN网站上搜一下相关的polyfill代码复制粘贴一下就好了。

大致例举下常见的兼容性问题:

Vue、Angular不支持IE8

请在项目开发之前先确定浏览器要兼容到的程序,不需要兼容到IE8的项目要及时劝阻,需要兼容到IE8的项目别上Vue、Angular这些,喜欢MVWhateveryoulike框架的话可以考虑上avalon,如果还要同时考虑SEO,那直接上jquery 1+版本其实也挺好。

部分JS API不支持

使用polyfill,这个可以去MDN这类网站上找相关实现。或者使用做了相关兼容性处理的js库文件。

IE6、7、8怪异模式(quirk)下的盒模型

IE6、7、8怪异模式下的盒模型相当于元素应用了CSS3的box-sizing: border-box;后的结果——width/height的计算是包括border、padding在内的。这个只要你在文档头部进行<!DOCTYPE html>这样的声明就可以避免了。所以如果你碰到一个人不知道IE6、7、8怪异模式下的盒模型问题的话,其实没什么,说明他一直有写这些头部文档类型声明。

CSS兼容性

由于各个浏览器对各种html元素的默认样式是不一致的,所以需要一套CSS Reset来进行统一,可以视统一后的样式为浏览器的“默认样式”,然后在这个基础上进行界面开发。

当初学初学前端的时候,我们还会手写一堆css厂商前缀来尽可能保障各个浏览器都能对这些css属性有个较好的识别。现在借助autoprefixer这类node工具,我们可以把这个工作交给工具去处理。

这里有个非常好用的网站:http://caniuse.com,在这上面可以查各种CSS属性的兼容性,比如可以查到微软对border-radius属性的支持是从IE11开始的,这个地方如果考虑为优雅降级处理的话,就是IE11开始的现代浏览器里显示圆角,IE10及以下的浏览器里显示矩形;这个地方如果想都显示圆角的话,可以不使用border-radius属性,改为使用background-image背景图片,然后将圆角图片作为背景使用。

IE8不支持Html5新标签

IE8出现的比Html5还早,不支持header、footer、article、nav这些新标签是能理解的。在IE8中,可以通过 document.createElement('article'); 这样的方式来让IE8能对其进行识别,另外还需要在CSS里对这些元素进行display属性的声明,因为IE8并不知道他们是块级元素还是行内元素。这种重复性的工作早有现成的解决方案——可以直接使用一个叫html5shiv的js库(这种对页面样式潜在影响比较大的库,应当在head头部中就进行引入,而不是至于body结束标签处)。

结语

其实PC端现存的兼容性问题就那么多,你按标准来写代码即可,你能碰到的问题基本上搜一下都有现成的处理方案的。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注