浏览器兼容性问题摘要

浏览器兼容性问题通常是由某些标准的某些浏览器定义不一致（是的，不同的浏览器）引起的. 俗话说: 没有IE是没有害处的.

1. 根据用户社区使用的浏览器版本，选择使用降级还是逐步增强.

优雅的降级: 从一开始就构建站点的完整功能，然后针对浏览器进行测试和修复. 例如，一开始，使用CSS3的功能构建了一个应用程序，然后逐渐对主要浏览器进行了黑客攻击，以便可以在低级浏览器上正常浏览.

渐进式增强: 从一开始就为低级浏览器构建页面浏览器兼容问题总结，完成基本功能，然后为高级浏览器执行效果浏览器兼容问题总结，交互和附加功能，以获得更好的体验.

2. 分析市场上主要浏览器的市场份额，并确定是否有必要兼容

您可以访问浏览器市场份额网站: statcounter以查看当前浏览器对特定CSS3和HTML5功能的支持.

浏览器的兼容性主要包括三个方面: 样式兼容性（css），交互兼容性（javascript）和浏览器入侵.

var eventshiv = {
    // event兼容
    getEvent: function(event) {
        return event ? event : window.event;
    },
    // type兼容
    getType: function(event) {
        return event.type;
    },
    // target兼容
    getTarget: function(event) {
        return event.target ? event.target : event.srcelem;
    },
    // 添加事件句柄
    addHandler: function(elem, type, listener) {
        if (elem.addEventListener) {
            elem.addEventListener(type, listener, false);
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, listener);
        } else {
            // 在这里由于.与'on'字符串不能链接，只能用 []
            elem['on' + type] = listener;
        }
    },
    // 移除事件句柄
    removeHandler: function(elem, type, listener) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, listener, false);
        } else if (elem.detachEvent) {
            elem.detachEvent('on' + type, listener);
        } else {
            elem['on' + type] = null;
        }
    },
    // 添加事件代理
    addAgent: function (elem, type, agent, listener) {
        elem.addEventListener(type, function (e) {
            if (e.target.matches(agent)) {
                listener.call(e.target, e); // this 指向 e.target
            }
        });
    },
    // 取消默认行为
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    // 阻止事件冒泡
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

IE的条件注释仅适用于IE浏览器，不适用于其他浏览器

操作员

含义

小于

大于

小于或等于

大于或等于

不相等

html5shiv.js: 解决了ie9以下的浏览器无法识别html5中新添加的标签的问题.

respond.js: 解决ie9以下的浏览器不支持CSS3媒体查询的问题

picturefill.js: 解决以下问题: ie9以下的浏览器不支持CSS3 Media Query

<!--[if lt IE 9]>
  <script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js"></script>
<![endif]-->

字符

示例

说明

_color: 红色；

只有IE6可以识别

*颜色: 红色；

可以识别IE6 / 7

颜色: 红色\ 9;

IE8及以下版本可以被识别

参考文章: 1.如何明智地回答浏览器兼容性问题

2. 浏览器兼容性问题的解决方案·摘要

3. JS高级文章-前端瑞士Modernizr.js

发布于2019-01-27 09:21天河Heinyu阅读（...）评论（...）编辑

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-212966-1.html