首页 > 其他分享> 文章详细

浏览器的兼容性问题

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

标签：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条件注释法

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

浏览器的兼容性问题