前端浏览器开发中的浏览器兼容问题【持续更新】

一、什么是浏览器兼容问题

浏览器兼容问题指：“不同浏览器(IE、Chrome、FireFox、Safari、Edge)对同一种CSS样式或同一段JS代码的解析和渲染会有所不同”，从而用户在不同浏览器环境下的访问呈现的页面效果不一致。

浏览器兼容问题分为：“CSS兼容问题”、“JavaScript兼容问题”

造成浏览器兼容问题的根本原因是：“不同浏览器使用的内核不同”，不过随着时代的发展Webkit内核逐渐统一市场，浏览器兼容问题也越来越少。

常见浏览器内核：

浏览器	内核
IE	Trident
Chrome	Blink
Firefox	Gecko
Safari	Webkit
Edge	Blink

Blink内核是Webkit内核的一个分支，属于同一个源代码开发

而在手机浏览器中，几乎全是Webkit内核开发

二、JavaScript兼容问题及解决方案

2.1addEventListener与attachEvent的区别

attachEvent—————————兼容IE7、IE9

addEventListener———————兼容Firefox、chrome、IE、safari，不兼容IE7、IE8

解决方法：

function addEvent(el,eventName,callback){
    if (elment.addEventListener){
        //现代浏览器使用addEventListener
        el.addEventListener(eventName,callback,false);
    }
    else if (el.attachEvent){
        //旧浏览器使用attachEvent
        el.attachEvent('on' + eventName,callback);
    } 
    else{
        //最后使用内联事件属性
        element['on' + eventName] = callback;
    }
}

//使用示例
const button = document.getElementById('myButton');
addEvent(button,'click',funcion(){
    console.log('按钮被点击了');
})

2.2集合类对象问题

IE下，可以使用()或[]获取集合类对象

FireFox下，只能使用[]获取集合对象

解决方法：

统一使用[]获取集合类对象

2.3自定义属性问题

IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用gettAttribute()获取自定义属性

firefox下，只能使用getAttribute()获取自定义属性

解决方法：

统一使用getAttribute()获取属性

2.4event.x与event.y问题

IE下，event对象有x，y属性，没有pageX、pageY属性

Firefox下，event对象有pageX、pageY属性，没有x，y属性

解决方法：

var myDirectionX = event.x ? event.x : event.pageX;
var myDirectionY = event.y ? event.y : event.pageY;

2.5window.location.href问题

IE可以使用window.location或window.location.href

Firefox1.5下，只能使用window.location

解决方法：

统一使用window.location

2.6事件委托方法

function f(){...}

在IE下，使用document.body.onload = f;

在Firefox下，使用document.body.onload = f();

解决方法：

统一使用document.body.onload = function() {}

三、CSS兼容问题及解决方案

3.1浏览器CSS样式初始化

* {
    margin:0;
    padding:0;
    /* 根据需要添加 */
    box-size:border-box;
}

3.2浏览器私有属性

-moz表示firefox浏览器私有属性
-ms表示IE浏览器私有属性
-webkit-表示chrome、safari、edge私有属性
-o表示opera私有属性

对于私有属性的顺序，要把标准写法放到最后，兼容性写法放到前面：

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
 -moz-transform:rotate(-3deg); /*为Firefox*/
 -ms-transform:rotate(-3deg); /*为IE*/
 -o-transform:rotate(-3deg); /*为Opera*/
 transform:rotate(-3deg);