这篇文章主要介绍“浏览器兼容性的情况有哪些，怎么解决”，有一些人在浏览器兼容性的情况有哪些，怎么解决的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

浏览器的兼容性无非还是样式兼容性（css），交互兼容性（javascript），浏览器 hack 三个方面。

样式兼容性（css）方面

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

* { margin: 0; padding: 0; }

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

浏览器内核与前缀的对应关系如下

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

交互兼容性（javascript）

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

 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);
     }
 };

（2）new Date()构造函数使用，‘2019-12-09’是无法被各个浏览器中，使用new Date(str)来正确生成日期对象的。 正确的用法是’2019/12/09’.

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

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

浏览器 hack

（1）快速判断 IE 浏览器版本

<!--[if IE 8]> ie8 <![endif]-->
 
 <!--[if IE 9]> 骚气的 ie9 浏览器 <![endif]-->

（2）判断是否是 Safari 浏览器

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

（3）判断是否是 Chrome 浏览器

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

到此这篇关于“浏览器兼容性的情况有哪些，怎么解决”的文章就介绍到这了,，更多相关浏览器兼容性的情况有哪些，怎么解决内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS的px和pt单位表示什么，怎样用

  px和pt，一个是设备坐标，一个是逻辑坐标，两者是不同的。pt是个绝对单位，1 pt =1/72 英寸px是个相对单位，一般像素的参考值为：在一个像素密度是90 pdi的显示器上，正常人从距离显示器2

• CSS选择器关系有哪些，怎么理解

  父元素： 直接包含其他元素，这个元素就是包含元素的父元素。祖先元素：包含其他元素，这个元素就是包含元素的祖先元素。子元素： 直接被包含的元素。后代元素： 被包含的元素。

• CSS内嵌样式是什么，有何特点？

  这篇文章我们来了解CSS内嵌样式的相关内容，css内嵌样式是将css写在网页源文件的头部，利用style标签将css样式代码包围的样式。接下来我们详细的看看CSS内嵌样式有什么特点。

• css3动画实现方式有多少种？用法是什么？

  css3动画实现方式有多少种？css3动画实现的方式有三种，分别是transition 实现渐变动画、 transform 转变动画、animation 实现自定义动画。接下来我们就来看看这三种方式的实现。

• CSS中文字修饰效果实现有什么方法

  这篇文章主要给大家来说一说CSS之文字修饰的相关技巧内容，这里主要从text-decoration和text-shadow这两个属性聊起，感兴趣的朋友可以随时来看一看小编所整理的资料。