脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > 浏览器兼容教程 > 浏览器兼容性

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

  发布时间：2020-02-20 17:01:00   作者：ayixideluu   我要评论
这篇文章主要介绍了常见的浏览器兼容性问题(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

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

相关文章

  • 浅谈遇到的几个浏览器兼容性问题

    这篇文章主要介绍了浅谈遇到的几个浏览器兼容性问题，详细的介绍了几种我遇到的问题和解决方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-09-26

  • base64图片在各种浏览器的兼容性处理

    这篇文章主要介绍了base64图片在各种浏览器的兼容性处理的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-14

  • 对常见的css属性进行浏览器兼容性总结(推荐)

    这篇文章主要介绍了对常见的css属性进行浏览器兼容性总结(推荐)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-20

  • CSS浏览器兼容性常见问题总结大全(推荐)

    这篇文章主要介绍了CSS浏览器兼容性常见问题，ie各版本的浏览器的兼容情况做了详细介绍，开发中需要注意到的兼容性问题大家可以注意一下，具体操作步骤大家可查看下文的详
    2017-08-16

  • 避免不必要的浏览器兼容性问题的5个技巧

    浏览器兼容性问题总是让人很头疼，这里介绍几个技巧来避免这个问题,需要的朋友可以参考下
    2017-04-08

  • 详解CSS3浏览器兼容

    本篇文章主要介绍了CSS3与页面布局学习和总结——浏览器兼容与前端性能优化 ，具有一定的参考价值，有需要的可以了解一下。
    2022-09-29

  • 浅谈浏览器的兼容性(必看篇)

    下面小编就为大家带来一篇浅谈浏览器的兼容性(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-25

  • 详解IE浏览器的haslayout属性及相关兼容性问题解决

    haslayout是IE浏览器专有的属性,然而这个属性却同样会给不同版本的IE带来浮动问题等一些列兼容性上面的麻烦...这里我们就来详解IE浏览器的haslayout属性及相关兼容性问题解
    2016-07-08

  • 浏览器hack总结 详细的浏览器兼容性的快速解决方法

    下面小编就为大家带来一篇浏览器hack总结 详细的浏览器兼容性的快速解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起公司小编过来看看吧
    2016-06-16

  • HTML5的video标签的浏览器兼容性增强方案分享

    使用HTML5时就应该考虑包括桌面以及移动端的浏览器兼容问题,特别是视频方面浏览器对解码的支持会有所不同,所以下面就来分享一个HTML5的video标签的浏览器兼容性增强方案分
    2016-05-19

最新评论

关注微信公众号

扫一扫