众所周知,目前市场上最火的五大浏览器是: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.怪癖检测:由于有些浏览器有自己独特的特征,通过检测浏览器有无对应的特征,来分辨浏览器。
这些方法仅仅是本人在开发中遇到的方法,希望在开发过程中能与大家共同分享,可能还有其它方法,如果大牛们还有其他方法,还请留言,多多指教!