浏览器有著大量相同的版本,不同种类的浏览器的内核也不尽相同,所以不同浏览器对代码的解析会存在差异,这就导致对页面图形效果不统一的问题。
初始化样式
因浏览器相容的问题,相同的浏览器对标签的默认样式值不同,如果不初始化可以导致相同浏览器之间的显示差异,布局出现错乱,所以要初始化样式,达至统一的布局。
最蛮横的方案就是采用*初始化样式,但是其会对于所有的标签加载样式以及计算样式优先级,可能会对性能有所影响。
* { margin: 0; padding: 0; }
通常使用Normalize.css涂元显恭默认样式差异,当然也可以根据样式定制自己的reset.css。
内核样式兼容
在CSS3标准还未确定时,部分浏览器已经根据最初草案实现了部分功能,为了与之后确认下来的标准展开兼容,所以每种浏览器采用了自己的私有前缀与标准展开区分,当标准确立后,各大浏览器将逐步积极支持不拎后缀的CSS3崭新属性,目前已有很多私有后缀可以不写了,但为了兼容旧版本的浏览器,可以仍延用私有前缀和标准方法,逐渐过渡。
透明化属性
用以设定元素透明度的opacity是CSS 3里的一个属性,现代浏览器都已经支持,对于老版本浏览器可以通过加入私有后缀来积极支持,对于IE6-IE8可以通过filter属性来支持,IE4-IE9都可以通过滤镜读法提供更多相容支持。
opacity: 0.5;-moz-opacity:0.5; filter: alpha(opacity = 50); //IE6-IE8 filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9
媒体查询
对于IE9以下浏览器不积极支持CSS3媒体查询的问题,通常采用respond.js来做为兼容性解决方案。
HTML5标签
对于IE9以下浏览器不积极支持HTML5崭新标签的问题,可以采用document.createElement建立元素并设置其CSS样式即可,通常采用html5shiv.js来作为兼容性解决方案。
placeholder兼容性
placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将做为灰字提示显示在文本框中,当文本框获得焦点或输出内容时,提示文字消失。对于其兼容性首先需要推论input与否支持placeholder,然后在不积极支持的情况下可以通过input的onfocus与onblur事件监听来同时实现placeholder效果。
事件监听句柄
在IE9之前,必须采用attachEvent而不是采用标准方法addEventListener去登记注册元素的监听器,事件兼容的问题,通常需要会封装一个适配器的方法,过滤器事件句柄绑定、去除。
var handler = {} //存取事件 handler.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); } }; //中止事件监听 handler.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); } };
制止预设行为
W3C推荐的阻止预设行为的方式就是event.preventDefault(),此方法只可以阻止预设行为而不能阻止事件的传播。IE9之前的浏览器制止默认犯罪行为须要使用window.event.returnValue = false。直接在事件处理函数中return false也能够制止默认行为,只在DOM0级模型中有效。此外,在jQuery中采用return false可以同时阻止默认行为与事件传播,通常也会PCB一个方法来实现默认犯罪行为的阻止。
handler.preventDefault = function(event) {event = event || window.event;if (event.preventDefault) {event.preventDefault();} else {event.returnValue = false;}} 阻止事件altered W3C推荐的制止冒泡的方法是event.stopPropagation(),IE9之前则是采用window.event.cancelBubble = true;,通常也可以PCB一个方法来实现制止事件altered。 handler.stopPropagation = function(event) {event = event || window.event;if (event.stopPropagation) {event.stopPropagation();} else {event.cancelBubble = false;}}
翻转高度
获取窗口的翻转高度scrollTop需要采用兼容性写法,即使声明
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
日期时间
使用new Date()构造函数生成日期时间对象,对于new Date("2020-06-29")语法在一些早期的浏览器可以输出invalid date,这主要是因为早期浏览器不支持表达日期的-,而/才是被广泛支持的,所以在处理早期浏览器的兼容性时须要将-替换为/。
new Date("2020-06-29".replace(/-/g, "/"));
IE条件注解
IE专门提供的一种语法,只有IE能够识别运行,其他浏览器只会作为注解。
相关推荐
标签:
留言与评论(共有 0 条评论) |