浅谈浏览器兼容问题

Posted 2021-04-30 幺玖零陆网络科技有限公司

如今有很多浏览器在市面上应用，例如：百度，搜狗，QQ等但是归根结底，它们都没有自己的内核，骨子里都是用的五大内浏览器内核。

五大浏览器厂商的内核：

IE: trident 内核

Firefox：gecko 内核

Safari:webkit 内核

Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核

Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发）

因为内核不同导致不同浏览器之间存在兼容问题

1. 什么是兼容问题：是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

2. 一般关于兼容问题都是从样式和js两个方向发现各大浏览器兼容问题。

        a. 用css hack来解决

          原理：通过在css样式中加入一些特殊符号，让不同浏览器识别不同符号（不同浏览器对不同符号是有标准的），已达到应用不同的css样式目的。css hack是一种类似作弊的手段，以欺骗浏览器的方式达到兼容。

           特点：能够通过web标准验证，只针对古老浏览器（例如：ie6,ie7），代码丑陋。不提倡使用

           b.浏览器CSS样式初始化

                 原理：由于每个浏览器的css默认样式不尽相同，所以最简单有效          的方式就是对其进行初始化。推荐样式库：Normalize.css

                c. javascript中兼容问题

                 事件绑定中的addEventListener()方法

Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，使用 attachEvent() 方法来添加事件

处理方法：

我们通过判断浏览器是否支持addEventListener函数或者attachEvent函数来执行对应的语句

//参数说明：
//element：需要操作的对象
//type：需要绑定的事件名
//fn：事件触发时执行的函数
function addEvent(element, type, fn){
    if(element.addEventListener){
        element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,fn);  
    }else{
        element["on"+type]=fn;
    }
}