浏览器内核及对应兼容性的处理问题

　众所周知，目前市场上最火的五大浏览器是：google chrome、firefox（FF）、Internet Explorer（IE）、safari、opera。

　他们相对应的内核是什么呢？

　　谷歌浏览器：Google Chrome，谷歌浏览器之前一直使用苹果的webkit内核，但是现在它与苹果内核分道扬镳，自己开创了新的blink内核，这个内核也在被欧鹏（opera浏览器）共同采用和开发；

　　火狐浏览器：Mozilla Firefox ，内核是Gecko；

　　opera浏览器：内核是blink；

　　Safari浏览器：使用的是苹果公司自己的内核webkit；

　　IE浏览器：微软出品的浏览器，IE4以上版本都是Trident内核。由于垄断性，IE在很长一段时间内没有更新，导致两个后果：一是IE与W3C标准脱节，二是Trident内核大量的bug问题没得到及时解决。所以这就给了其他浏览器机会，比如firefox等。也正是这些原因，使Web前端开发人员大费周折，特别是IE6正处在新旧交替的关键地方（已经逐渐被舍弃）。

　　当然除了这五大浏览器之外，市场上还有很多，例如：

　　搜狗浏览器：兼容模式（IE：Trident）和高速模式（webkit）；

　　遨游浏览器：兼容模式（IE：Trident）和高速模式（webkit）；

　　QQ浏览器：普通模式（IE：Trident）和极速模式（webkit）；

　　360极速浏览器：基于谷歌（Chromium）和IE内核；

　　360安全浏览器：IE内核。

　当然，既然浏览器的内核不同，那么浏览器在解析代码的时候就会有可能不一样，因为他们所支持的方法有不同之处。

　在pc端，通用的方法有三种：分别是能力检测、代理检测和怪癖检测。

　　1.能力检测（常用）：通过获取标签的API，检测他是否支持这个API，如果支持，那么就用，否则就换另一种API来达到效果，例如原生js中常用的innerText方法：

 1 // 书写innerText的兼容性代码:
 2 // 获取标签的innerText（兼容所有浏览器）
 3 function getInnerText(element) {
 4     if (typeof element.innerText === "string") {
 5         return element.innerText;
 6     } else {
 7         return element.textContent;
 8     }
 9 }
10 
11 //设置标签的innerText（兼容所有浏览器）
12 function setInnerText(element, value) {
13     //能力检测
14     if (typeof element.innerText === "string") {
15         element.innerText = value;
16     } else {
17         element.textContent = value;
18     }
19 }

　　2.代理检测：通过在浏览器中的控制台（console.log）中输入navigator.userAgent，来获得浏览器的相关信息。

　　3.怪癖检测：由于有些浏览器有自己独特的特征，通过检测浏览器有无对应的特征，来分辨浏览器。

这些方法仅仅是本人在开发中遇到的方法，希望在开发过程中能与大家共同分享，可能还有其它方法，如果大牛们还有其他方法，还请留言，多多指教！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有