常见的浏览器兼容性问题(小结)

网页制作 2024/12/24 佚名

3 2 1

浏览器的兼容性无非还是样式兼容性（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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

浏览器兼容性,常见浏览器兼容性

标签：

浏览器兼容性,常见浏览器兼容性

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

岱庙资源网 Copyright www.zgmyg.com

评论“常见的浏览器兼容性问题(小结)”

常见的浏览器兼容性问题(小结)

暂无“常见的浏览器兼容性问题(小结)”评论...

www.zgmyg.com 岱庙资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月24日

常见的浏览器兼容性问题(小结)

浏览器兼容性,常见浏览器兼容性

CSS完美解决前端图片变形问题的方法

CSS3关于z-index不生效问题的解决

评论“常见的浏览器兼容性问题(小结)”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接