Question

web浏览器兼容

Answer 1

什么是浏览器兼容？

在我们的实际开发中会涉及到在多个浏览器比如

firefox，opera，chrome，或者IE的多个版本下进行调试，在不同版本浏览器下会出现显示效果不一的情况，而浏览器兼容就是为了处理这种情况。

浏览器最重要核心的部分是“浏览器内核”，负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

主要浏览器内核有哪些？

1、Trident内核代表产品Internet Explorer

2、Gecko内核代表产品Firefox

3、WebKit内核代表作品Safari    主要用于Mac OS系统

4、Presto内核代表作品Opera

5、Blink由Google和Opera Software开发的浏览器排版引擎

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

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

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

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

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

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

1.快速判断 IE 浏览器版本

<!--[if IE 8]> ie8 <![endif]-->

2.判断是否是 Safari 浏览器

/* Safari */

var isSafari = /a/.__proto__=='//';

3.判断是否是 Chrome 浏览器

/* Chrome */

var isChrome = Boolean(window.chrome);