ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

浏览器的兼容性问题

2020-07-30 18:35:48  阅读:28  来源: 互联网

标签:function obj type req 兼容性问题 浏览器 IE event


浏览器内核:

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)
}
}

 

标签:function,obj,type,req,兼容性问题,浏览器,IE,event
来源: https://www.cnblogs.com/shirleysblog/p/13405584.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有