浏览器兼容性问题

2019-05-08  本文已影响0人  月半女那
  1. 样式兼容性问题(css):可以重置全局样式(自己手写reset.css)也可以使用 Normalize.css
    ie6下图片半透明:filter
    ie9input设置line-height不起效果,要同时设置height
    在chorme中文界面下默认会将小于12px的文本强制按照12px显示,可以通过css属性 -webkit-text-size-adjust:none
  2. 交互兼容性(js): 事件兼容性问题,通常可以封装一个适配器,过滤事件句柄绑定,移除,冒泡阻止以及默认事件行为处理
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);
     }
 };
  1. 浏览器hack
 <!--[if IE 8]> ie8 <![endif]-->
 
 <!--[if IE 9]> ie9 浏览器 <![endif]-->
  1. 浏览器内核
浏览器 内核
IE Trident
chorme Blink
firefox Gecko
Safari Webkit
Opera Blink
上一篇下一篇

猜你喜欢

热点阅读