浏览器的兼容性问题

浏览器内核：

ie：trident

chrome：blink

opera：blink

firfox：gecko

safari：webkit

 

ie8开始，慢慢靠近规范

css兼容问题解决：

1. css hack：

    属性（*，_）：*color/*IE6,IE7*/;   _color/*IE6*/;   color /*all*/;   color:#222\9/* IE678910全生效*/；\0:IE8910;   \9\0:IE910

    选择器， 

    IE条件注释法  <!--[IF IE]-->  <!--[END]-->

 2. 浏览器私有属性：-webkit-（Safari、chrome），-moz-（firefox），-ms-（ie），-o-（opera）

 3.css默认样式初始化

 4.常见问题：

     IE默认水平居中，firefox左对齐

     chrome默认字体最小值是12px，解决：html{-webkit-text-size-adjust:none;} 

          /*-webkit-text-size-adjust放在body上会导致页面缩放失效，用-webkit-text-size-adjust不要定义成可继承的或全局的*/

     ul在chrome、firefox默认有padding

     盒模型问题

js兼容性解决：

监听事件：addEventListener、attachEvent

 function addEvent(obj,type,fn){
//添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为false
        if (obj.addEventListener) {
            obj.addEventListener(type,fn,false);//非IE
        } else{
            obj.attachEvent('on'+type,fn);//ie,这里已经加上on，传参的时候注意不要重复加了
        };
    }
    function removeEvent(obj,type,fn){//删除事件监听
        if (obj.removeEventListener) {
            obj.removeEventListener(type,fn,false);//非IE
        } else{
            obj.detachEvent('on'+type,fn);//ie，这里已经加上on，传参的时候注意不要重复加了
        };
    }

event事件：在IE下，事件对象是全局的，作为window的一个属性。event在其他浏览器中作为方法的第一个参数传入。

 document.onclick=function(ev){//兼容写法；
        var e=ev||window.event;
        var mouseX=e.clientX;//鼠标X轴的坐标
        var mouseY=e.clientY;//鼠标Y轴的坐标
    }

冒泡事件：stopPropagation、cancelBubble

function handleBubble(event){
if(window.event){
//IE
window.event.cancelBubble=true
}else{
//chrome firefox
event.stopPropagation()
}
}

const问题：IE下只能用var来定义常量

ajax创建对象不同：

function createXHR(){
let req=null
if(window.XMLHttpRequest){
req=new XMLHttpRequest()
}else{
req=new ActiveXObject('Microsoft.XMLHTTP')
}
return req
}

var req=createXHR()

//  open: 为数据请求做好准备
//     参数1： 请求数据的方式： GET, POST, DELETE, PUT 等
//     参数2： 服务器的信息
//     参数3： true 代表异步，false 代表同步操作
req.open("GET", "http://127.0.0.1:8080/ajax/ajaxtest", true);

// 请求的属性，代表请求的状态
//          0:   尚未请求
//          1:   开始请求数据，但服务器还没有收到请求
//          2:   服务收到请求了，但还没处理
//          3:   已经开始处理数据了
//         【4】: 服务器已经处理完数据，并返回结果
// req.readyState


// req.status 是 HTTP的状态码
//    【200】    正常请求到数据
// req.status

// req.onreadystatechange 是 req 对象中的属性，
// 当 准备状态 改变时
// 将这个值设置成一个函数，就相当于 当 准备状态 改变时， 执行这个函数

req.onreadystatechange=function(){
if(req.readyState===4&&satus===200){
alert(req.responseText)
}
}