浏览器兼容性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/alpha_xu_vvvvv/article/details/120442130

浏览器的兼容性问题

1.什么是浏览器的兼容性？

浏览器的兼容性就是在不同的浏览器运行都可以展示网站原本需要被显示的内容。即在不同的浏览器都可以正常显示网站内容（IE、Chrome、Safari等等）

2.为什么会出现浏览器的兼容性问题？

出现浏览器兼容性是因为每一个浏览器都有自己的一套规范，没有进行统一。例如：IE浏览器无法跟上新的html、css这些新特性；window与mac同一个浏览器也会有不一样的。

由于不同浏览器的不同对代码的解析不同，而产生的在页面上显示的效果不同。

3.解决浏览器的兼容性问题

样式兼容性（css）方面

normal.css 不同的浏览器样式存在差异，可以通过 normal.css 抹平差异
在CSS3还没有成为真正的标准时，浏览器厂商就开始支持这些属性的使用了。CSS3样式语法还存在波动时，浏览器厂商提供了针对浏览器的前缀，直到现在还是有部分的属性需要加上浏览器前缀。在开发过程中我们一般通过IDE开发插件、css 预处理器以及前端自动化构建工程帮我们处理。

内核	主要代表的浏览器	前缀
Trident	IE浏览器	-ms
Gecko	Firefox	-moz
Presto	Opera	-o
Webkit	Chrome和Safari	-webkit

在还原设计稿的时候我们常常会需要用到透明属性，所以解决 IE9 以下浏览器不能使用 opacit。

 opacity: 0.5;
 filter: alpha(opacity = 50); //IE6-IE8我们习惯使用filter滤镜属性来进行实现
 filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); 
 //IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)

交互兼容性（javascript）

设置监听事件


//添加监听
     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，传参的时候注意不要重复加了
        };
    }

js阻止默认事件

//js阻止默认事件
    document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
            e.preventDefault();//W3C标准
        }else{
            e.returnValue='false';//IE..
        }
    }

阻止事件传播


    var btn = document.getElementById("btn");
    btn.onclick = function(event) {
        alert("点击了按钮")
        var event = event || window.event;
        if(event && event.stopPropagation)
        {
            event.stopPropagation();  //  w3c 标准
        }
        else
        {
            event.cancelBubble = true;  // ie 678  ie浏览器
        }
    }