浏览器的兼容性无非还是样式兼容性(css),交互兼容性(javascript),浏览器 hack 三个方面。
样式兼容性(css)方面
- 因为历史原因,不同的浏览器样式存在差异,可以通过 Normalize.css 抹平差异,也可以定制自己reset.css,例如通过通配符选择器,全局重置样式
{ margin: 0; padding: 0;
- 在CSS3还没有成为真正的标准时,浏览器厂商就开始支持这些属性的使用了。CSS3样式语法还存在波动时,浏览器厂商提供了针对浏览器的前缀,直到现在还是有部分的属性需要加上浏览器前缀。在开发过程中我们一般通过IDE开发插件、css预处理器以及前端自动化构建工程帮我们处理。
浏览器内核与前缀的对应关系如下
内核 | 主要代表的浏览器 | 前缀 |
---|---|---|
Trident | IE浏览器 | -ms |
Gecko | Firefox | -moz |
Presto | Opera | -o |
Webkit | Chrome和Safari | -webkit |
- 解决 IE9 以下浏览器不能使用 opacity
opacity: 0.5;
filter: alpha(opacity = 50); //IE6-IE8我们习惯使用filter滤镜属性来进行实现
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)
交互兼容性(javascript)![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/37538317a64679c32faeb9f548404f5f.png)
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);
}
};