关于前端兼容所有浏览器的一些想法和总结

最新推荐文章于 2024-03-03 16:30:00 发布

YSP易水寒

最新推荐文章于 2024-03-03 16:30:00 发布

阅读量3k

点赞数

分类专栏：浏览器兼容文章标签：浏览器

浏览器兼容专栏收录该内容

12 篇文章 0 订阅

订阅专栏

原文链接啊：关于前端兼容所有浏览器的一些想法和总结

作为一个前端，最烦恼的应该是如何让网页在所有浏览器下都能正常浏览。这是一项不断变化和繁琐的工作，我现在就来总结一下我在工作中遇到的问题和解决的办法。

首先，需要了解浏览器内核不同，导致了网页渲染效果不同。
从网上众多的介绍中，我总结了一下这些要点：

1.简单来说浏览器可以分为两部分，外壳(Shell)+内核(Rendering Engine)。
外壳主要是提供给用户界面操作，参数设置等等,是调用内核来实现各种功能的；而内核是浏览器核心，基于标记语言显示内容的程序或模块。浏览器内核的不同使得其对网页代码的解释不同，导致渲染效果不同。

2.浏览器内核又可以分成两部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。
罗列一些主要内核及使用的浏览器：
Trident内核：IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）、360安全浏览器、傲游、搜狗浏览器、腾讯TT等；（后面这堆国内的浏览器新版都是双核，一般把Trident称作则是“兼容浏览模式”，而其他内核叫做“高速浏览模式”，用户可以来回切换。）
Gecko内核：Mozilla Firefox（火狐浏览器）、Mozilla SeaMonkey、Epiphany（早期版本）、Flock（早期版本）、K-Meleon等；
Presto内核：Opera7及以上
Webkit内核（Chromium）：Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器；Google Chrome、Chromium、SRWare Iron、Comodo Dragon；

而 JavaScript 引擎则影响着网页中js的执行速度，由于网页中通常有大量js代码，因此js引擎的解释速度大大影响了网页的响应速度。

3.这些内核都有什么优缺点。
业界内公认，Opera的Presto内核在处理JS脚本等脚本语言时，会比其他的内核快3倍左右，但缺点就是为了达到很快的速度而丢掉了一部分网页兼容性；Chrome的Webkit内核优点就是网页浏览速度较快，虽然不及 Presto 但是也胜于 Gecko 和 Trident，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示；火狐的Gecko内核优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存；而IE低版本（IE6，7）的Trident内核和W3C标准脱节，大量Bug等安全问题没有得到解决， IE7只是对IE6的小小增强，IE8完全支持CSS2.1和选择器，DOM操作更符合W3C标准，但DOM支持仍不完整，IE9 完全支持DOM L1，DOM L2，Jscript更符合标准，ECMAScript5支持，HTML5，CSS3支持，SVG支持，因此IE6,,IE7也是在做兼容时最令人头疼的。

其他一些细节可以参考以下这些文章：
浏览器内核的解析和对比
 [科普文] 关于浏览器内核的一些小知识，明明白白选浏览器！

其次，有必要先了解国内浏览器的使用情况。
根据百度统计的流量研究院发布的数据，过去三个月的浏览器市场份额如下图：

浏览器市场份额报告_2016.06-2016.08_版本.png

浏览器市场份额报告_2016.06-2016.08-1_品牌.png

可以从中看出，国内使用IE和chrome的人不相上下，而IE略多，我觉得主要“归（ze）功（guai）”于windows预装和360、搜狗、百度等双核浏览器。而IE中使用8.0版本的最多，其次为IE9，IE7，IE6。这应该是因为winXP预装的是IE6，最高能升级到IE8，winVista 预装IE7，最高到IE9， win7自带IE8，最高到IE11，win8自带IE11。

综上所述，需要做兼容的主要对象为IE8及更低版本（IE6，IE7），而IE8的使用人群很庞大，不得不重视，为其做兼容，而IE6，IE7视情况可忽略。

那么，问题来了：究竟IE8及更低版本与其他浏览器有什么不同之处呢？

最大的问题，IE8不支持HTML5 和 CSS3。这很正常嘛，IE8发布的时候还没有这两样东西呢。。。IE9+就已经可以支持了。而其他浏览器都没有那么多版本存在。。。。

先说比较简单的，IE8兼容HTML5.

HTML5有许多新特性都令网页变得酷毙了，其中一些是通过标签实现的，比较重要、使用频率比较高的，有音频(audio)、视频(video)、画布(canvas)、矢量图(svg)等，如果你的网页中用到这些新技术，就可以直接放弃IE8及更低版本了，解决方法是建立多套模板，通过程序对User-Agent的判断（后台判断）为不同的浏览器用户显示不同的页面，案例如：优酷网。

而如果只是布局内容方面的新标签，如article,aside,dialog,footer,header,section,footer,nav,figure,menu等，则可以使用Google的html5shiv包，代码如下：

1
2
3

<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

也可以直接到GitHub下载，自己引用。GitHub中还有详细的文档描述，地址为https://github.com/afarkas/html5shiv

但由于HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

1
2
3

article,aside,dialog,footer,header,section,footer,nav,figure,menu{
    display:block
}

HTML5的新标签能让代码语义化更直观，而且更方便SEO优化，但如果觉得这不太重要，就可以不用这些新标签去写，直接用div代替就不用考虑兼容了。

IE8及以下版本对CSS3的兼容就显得比较麻烦了，甚至IE6和IE7之间对CSS2的某些规则都不兼容，只能用hack了。（这里只总结使用W3C标准写的代码向下兼容，忽略在IE6，IE7环境下写的网页的向上兼容。）其中我认为比较大的问题是IE8看不懂media query！这可要命了，现在比较流行的是移动设备端优先的写法，bootstrap等UI框架都是这样写，这可在IE中乱了套；其次的border-radius,box-shadow,text-shadow,flex-box等都还好，只要页面不乱，难看一点也没关系；还有就是伪类和属性选择器，使得一些元素不能显示；最后就是2D动画和3D动画，transition过渡效果等比较炫的效果，没有也似乎不是很大关系，用IE8以下的估计对这个也不感冒。

以下总结下网上比较多的解决方法和自己在写网页中遇到的问题：

IE8可以利用X-UA-Compatible这个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页，在html的<head>标签中使用。

IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame[1]。

更详细的介绍X-UA-Compatible可以参考文章给网站添加X-UA-Compatible标签，和使用X-UA-Compatible来设置IE浏览器兼容模式，改变content内“IE=”的值，可以强制IE8用IE9，IE7，IE6等渲染。

最新的IE的渲染效果已经与谷歌无二致。

但是为保险，还是做些hack的工作好。

要IE8看懂media query，可以在头部引入respond.js或google的css3-mediaqueries.js使其支持查询。网上的博客大多比较偏向respond.js，只支持min-width和max-width，所以很小巧，已经够用了。原理、用法和注意事项可以参考这篇文章，写的很全面，HTML5 respond.js 解决IE6~8的响应式布局问题。我在github下载了之后直接打开test.html，发现用不了，看了这篇文章之后才了解了要在本地配置服务器，不能直接打开，了解了原理才知道。官方文档介绍得很详细，https://github.com/scottjehl/Respond

IE8有很多伪类选择器和属性选择器也是不认的，这篇文章总结了伪类在主流浏览器中的支持情况CSS选择器的浏览器支持，解决的方法就是直接在头部引用selectivizr.js，官方文档http://selectivizr.com/

1
2
3

<!--[if lt IE9]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->

而要让IE8及以下看懂，box-shadow, text-shadow, border-radius, gradient等属性，就可以用IE才认的pie.htc，具体使用方法和可以参看大牛写的这篇文章PIE使IE支持CSS3圆角盒阴影与渐变渲染，还有官方文档http://css3pie.com/。大牛的文章里面还提到了其他方法能使IE正确渲染出这些常用属性。

transition，animation等比较厉害的属性暂时没有找到好的支持方法，这种就可以直接用js搞定了。

总结下，一个兼容IE8及以下版本的的网页头部是这样样子的

<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<link type="text/css" rel="stylesheet" href="style.css"/>
<!--[if lt IE9]>
<script type="text/javascript" src="html5.js"></script>
<script type="text/javascript" src="respond.js"></script>
<script type="text/javascript" src="selectivizr.js"></script>