浏览器的兼容性无非还是样式兼容性(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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
Dreamweaver CS3的层是网页中可以容纳网页元素的容器,该怎么创建多个层呢?下面...
序 本文主要研究一下tunny Worker type Worker interface { // Process will syn...
1.我向你夸下海口,心为你滴成琥珀,冷却以后,千万年后爱通透依旧。 2.一朝春...
一、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。 二、同一...
Adobe Dreamweaver虽然非常好用,但它并不是唯一一个能够设计、开发、发布精彩网...
若有任何问题或建议,欢迎及时交流和碰撞。我的公众号是 【脑子进煎鱼了】,GitH...
网制作网页的时候,需要选择男女,所以需要添加下拉菜单,今天我们就来看看dw制...
经常修改magento的时候,有遇到element.style。 这个的优先级别超过style.css。 ...
前言 如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览...
绿色与人类息息相关,是永恒的欣欣向荣是的自然之色,代表了生命与希望,也充满...