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

浏览器的兼容性无非还是样式兼容性(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 浏览器版本

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

/* Safari */

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

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

/* Chrome */

var isChrome = Boolean(window.chrome);

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