web开发中常见的浏览器兼容性问题有哪些

这篇文章将为大家详细讲解有关web开发中常见的浏览器兼容性问题有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:国际域名空间、网页空间、营销软件、网站建设、龙岗网站维护、网站推广。

浏览器的兼容性无非还是样式兼容性(css),交互兼容性(javascript),浏览器 hack 三个方面。

样式兼容性(css)方面

web开发中常见的浏览器兼容性问题有哪些

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

* { margin: 0; padding: 0; }

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

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

主要代表的浏览器内核前缀
IE浏览器Trident-ms
FirefoxGecko-moz
OperaPresto-o
Chrome和SafariWebkit-webkit

交互兼容性(javascript)

web开发中常见的浏览器兼容性问题有哪些

(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

web开发中常见的浏览器兼容性问题有哪些

(1)快速判断 IE 浏览器版本


 
 

(2)判断是否是 Safari 浏览器

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

(3)判断是否是 Chrome 浏览器

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

关于“web开发中常见的浏览器兼容性问题有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网站标题:web开发中常见的浏览器兼容性问题有哪些
文章源于:http://scyanting.com/article/pjcegs.html