如何机制地回答浏览器兼容性问题

leanote 发布于2019-08-22 18:31 / 3479人阅读

摘要：前言有过面试经验的同学应该都被问过浏览器兼容性的问题，对于面试官的问题，常常猝不及防，因为通常他们都是这么问的。来谈谈浏览器兼容的问题吧，你对浏览器的兼容性有了解过吗，那么如何才是我们正确回答这个问题的姿势呢。

前言

有过面试经验的同学应该都被问过浏览器兼容性的问题，对于面试官的问题，常常猝不及防，因为通常他们都是这么问的。"来谈谈浏览器兼容的问题吧"，"你对浏览器的兼容性有了解过吗"，那么如何才是我们正确回答这个问题的姿势呢。

虽然面试官的问题十分的笼统，浏览器的兼容性无非还是样式兼容性（css），交互兼容性（javascript），浏览器 hack 三个方面。

样式兼容性（css）方面

因为历史原因，不同的浏览器样式存在差异，可以通过 Normalize.css 抹平差异，也可以定制自己的 reset.css，例如通过通配符选择器，全局重置样式

* { margin: 0; padding: 0; }

在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）

事件兼容的问题，我们通常需要会封装一个适配器的方法，过滤事件句柄绑定、移除、冒泡阻止以及默认事件行为处理

    var  helper = {}

    //绑定事件
    helper.on = function(target, type, handler) {
        if(target.addEventListener) {
            target.addEventListener(type, handler, false);
        } else {
            target.attachEvent("on" + type,
                function(event) {
                    return handler.call(target, event);
                }, false);
        }
    };

    //取消事件监听
    helper.remove = function(target, type, handler) {
        if(target.removeEventListener) {
            target.removeEventListener(type, handler);
        } else {
            target.detachEvent("on" + type,
            function(event) {
                return handler.call(target, event);
            }, true);
        }
    };

new Date()构造函数使用，"2018-07-05"是无法被各个浏览器中，使用new Date(str)来正确生成日期对象的。正确的用法是"2018/07/05".

获取 scrollTop 通过 document.documentElement.scrollTop 兼容非chrome浏览器

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

浏览器 hack

快速判断 IE 浏览器版本

判断是否是 Safari 浏览器

/ Safari /
var isSafari = /a/.__proto__=="//";

判断是否是 Chrome 浏览器

/ Chrome /
var isChrome = Boolean(window.chrome);

身段不能掉，我们是个有逼格的前端

“什么？你们公司要兼容IE6，我们今天的面试就到这里为止吧，再见”。现在如果还有哪个公司要兼容IE6的话就不要去了，开发起来得多不幸福。

扩展阅读

如何处理CSS3属性前缀_Autoprefixer

CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

往期文章

精读《你不知道的 javascript（上卷）》

精读《你不知道的javascript》中卷

精读《深入浅出Node.js》

javascript 垃圾回收算法

精读《图解HTTP》

思维导图下载地址

云服务器 GPU云服务器 webrtc如何做到兼容浏览器回答问题html 如何解决兼容问题?Win11仅支持1个I js面试闭包如何回答

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95944.html

如何机制地回答浏览器兼容性问题

摘要：前言有过面试经验的同学应该都被问过浏览器兼容性的问题，对于面试官的问题，常常猝不及防，因为通常他们都是这么问的。来谈谈浏览器兼容的问题吧，你对浏览器的兼容性有了解过吗，那么如何才是我们正确回答这个问题的姿势呢。前言有过面试经验的同学应该都被问过浏览器兼容性的问题，对于面试官的问题，常常猝不及防，因为通常他们都是这么问的。来谈谈浏览器兼容的问题吧，你对浏览器的兼容性有了解过吗，那么如...

Rindia 2019-08-30 15:54 评论0 收藏0
拒信收割机の前端面经（CVTE，唯品会，百度）

摘要：另外回答的时候要淡定，一些问题就算不懂也不能慌，要和面试官谈笑风生，然后尽量扯回到自己懂的东西上面大公司比如百度给我的感觉就是很重视基础思维和潜力。 —— 虽然我的offer少，但是我的拒信多啊这几天终于闲下来，做一点微小的工作，整理了一些之前几家公司的前端面试题和个人经验，想做前端的师弟妹可以参考，也欢迎各同行大神来指教~ （以下问题不分先后，时间久远难免有些遗漏；很多问题面试官都...

yzd 2019-08-29 11:23 评论0 收藏0
拒信收割机の前端面经（CVTE，唯品会，百度）

摘要：另外回答的时候要淡定，一些问题就算不懂也不能慌，要和面试官谈笑风生，然后尽量扯回到自己懂的东西上面大公司比如百度给我的感觉就是很重视基础思维和潜力。 —— 虽然我的offer少，但是我的拒信多啊这几天终于闲下来，做一点微小的工作，整理了一些之前几家公司的前端面试题和个人经验，想做前端的师弟妹可以参考，也欢迎各同行大神来指教~ （以下问题不分先后，时间久远难免有些遗漏；很多问题面试官都...

channg 2019-08-20 11:22 评论0 收藏0
拒信收割机の前端面经（CVTE，唯品会，百度）

摘要：另外回答的时候要淡定，一些问题就算不懂也不能慌，要和面试官谈笑风生，然后尽量扯回到自己懂的东西上面大公司比如百度给我的感觉就是很重视基础思维和潜力。 —— 虽然我的offer少，但是我的拒信多啊这几天终于闲下来，做一点微小的工作，整理了一些之前几家公司的前端面试题和个人经验，想做前端的师弟妹可以参考，也欢迎各同行大神来指教~ （以下问题不分先后，时间久远难免有些遗漏；很多问题面试官都...

BlackHole1 2019-08-01 15:46 评论0 收藏0