browser 兼容

liujiashunWeb
603 阅读4分钟
  • 我们在做浏览器兼容性处理时，如果以兼容性作为参考标准，一般会把浏览器分为哪几级？他们各自特点是什么？
    • IE8和之前，基本不支持新特性；
    • IE9开始，支持es5
    • 现代浏览器，支持越来越多的es6等出现的新特性；
  • { margin: 0; padding: 0; }
  • IE 图片放到IE上有边框。
    • 解决办法 给图片加border：0；或者border：0 none；
  • ie10和Chrome中i标签padding-right在Chrome中有时候无效。
    • 解决方案：用margin-right代替。或者flex。
  • es6中某些新语法在IE下不可用。比如：Symbol
    • webpack中配置babel-polyfill。
  • 不同浏览器兼容visibility:collapse;
    • 普通元素：完全隐藏（none）；
    • table：隐藏，会占据空间。
    • 仅在Firefox下起作用，IE会显示元素？，Chrome会将元素隐藏,但是占据空间
  • ie9以下浏览器多html5新增标签不识别问题
    <!--[if lt IE 9]>
 <script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
  • ie9以下浏览器不识别css3 Media Query的问题。
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  • 清除浮动
.fl { float: left; }
.fr { float: right; }
.clearfix:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; }
.clearfix { zoom: 1; }
  • 解决边距重叠问题
    • 当相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值。为了不让边距重叠，可以给子元素加一个父元素，并设置该父元素为 BFC：overflow: hidden;
<div class="box" id="box">
  <p>Lorem ipsum dolor sit.</p>

  <div style="overflow: hidden;">
    <p>Lorem ipsum dolor sit.</p>
  </div>

  <p>Lorem ipsum dolor sit.</p>
</div>
  • IE6 双倍边距的问题,同时又设置 margin，会出现双倍边距的问题
display: inline;
  • 解决 IE9 以下浏览器不能使用 opacity
opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
  • IE6 不支持 fixed以及出现的闪动bug
/* IE6 hack */
*html, *html body {
  background-image: url(about:blank);
  background-attachment: fixed;
}
*html #menu {
  position: absolute;
  top: expression(((e=document.documentElement.scrollTop) ? e : document.body.scrollTop) + 100 + 'px');
}
  • IE6 不识别！important关键字过滤器
  • IE6 cssSprite作为背景图有闪烁的现象，原因是没有将背景图缓存，每次触发hover的时候都会重新被加载。
    • 解决方案：可以用 JavaScript 设置 ie6 缓存这些图片：
    document.execCommand("BackgroundImageCache", false, true);
  • IE6 下列表和日期错位
    • 解决方案：日期 标签放在标题 a 标签之前即可
  • IE6 不支持min-height属性问题
    • 解决方案：
    min-height: 350px;
_height: 350px;
  • ie6 出现双倍浮向(双倍边距)会错误的把浮动边距加倍显示。
// 解决方案
给浮动元素添加声明：display:inline;
  • ie6 ie7下版本中，，部分元素默认高度（16px作用）。
// 给元素添加声明：font-size：0；
// 给元素添加声明：overflow:hidden,
  • IE7 IE8不支持background-size属性。
    • 但是老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。
    html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-image: url('img/37.png');
  background-repeat: no-repeat;
  background-size: cover;
  -ms-behavior: url('css/backgroundsize.min.htc');
  behavior: url('css/backgroundsize.min.htc');
}
  • IE6-7 在ie 中 img 与文字放一起时，line-height 不起作用
    • 解决：都设置成 float
  • ie6/7/8、opera cursor:hand 都支持，但是safari 、 ff 不支持
  • 求窗口大小的兼容写法
    // 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 网页内容实际宽高（包括工具栏和滚动条等边线）
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 网页内容实际宽高 (不包括工具栏和滚动条等边线）
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滚动的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;
  • 事件处理程序的兼容写法
var eventshiv = {
    // event兼容
    getEvent: function(event) {
        return event ? event : window.event;
    },

    // type兼容
    getType: function(event) {
        return event.type;
    },

    // target兼容
    getTarget: function(event) {
        return event.target ? event.target : event.srcelem;
    },

    // 添加事件句柄
    addHandler: function(elem, type, listener) {
        if (elem.addEventListener) {
            elem.addEventListener(type, listener, false);
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, listener);
        } else {
            // 在这里由于.与'on'字符串不能链接，只能用 []
            elem['on' + type] = listener;
        }
    },

    // 移除事件句柄
    removeHandler: function(elem, type, listener) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, listener, false);
        } else if (elem.detachEvent) {
            elem.detachEvent('on' + type, listener);
        } else {
            elem['on' + type] = null;
        }
    },

    // 添加事件代理
    addAgent: function (elem, type, agent, listener) {
        elem.addEventListener(type, function (e) {
            if (e.target.matches(agent)) {
                listener.call(e.target, e); // this 指向 e.target
            }
        });
    },

    // 取消默认行为
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    // 阻止事件冒泡
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};
  • css3前缀兼容问题
    • 解决方案：css预处理解决。
内核 主要浏览器 前缀
Trident IE浏览器 -ms
Gecko Firefox -moz
Presto Pera -o
Webkit Chrome和Safari -webkit
  • chrome获取scrollTop通过scrollTop。其它浏览器获取不到。
// 其它浏览器获取
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
  • IE浏览器和fireFox中event属性中x/y属性值或者pageX/pageY属性值。
    • 解决方案：三目运算符判断
mX = event.x ? event.x : event.pageX
avatar
文章
阅读
粉丝