浏览器的兼容性

2019年8月31日 158次阅读 来源: bottle_

浏览器的兼容性

html5兼容

html5有许多新增的标签，在不支持html5的浏览器中不能一般显现。
处置惩罚要领：
运用html5的静态资本；
到场剧本代码，document.createElement建立新的标签，并display:block;设置为块范例

css兼容

1、png24位的图片在ie6浏览器上涌现背景，处置惩罚方案是做成png8

2、浏览器默许的margin和padding差别，处置惩罚方案是 * {margin:0;padding:0;}

3、IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显现margin比设置的大
    
    浮动ie发生的双倍间隔
    #box {
        float:left;
        width:10px;
        margin:0 0 0 10px;
    }
    这类情况下ie会发生20px的间隔
    处置惩罚方案是在float的标签款式中到场_display:inline;(_这个标记只要ie6会辨认)
    
4、IE兼容
    渐进辨认的体式格局
    
    起首，"\9"将IE9浏览器从一切情况下星散出来
    接着，"+"将IE8和IE7、IE6星散开来
    .box{
        background-color:#f1ee18;  //一切都可辨认
        background-color:#00deff\9;   //IE6、7、8
        +background-color:#a200ff;   //IE6、7
        _background-color:#1e0bd1;    //IE6
    }

5、IE前提解释
<!--[if IE 6]>此处内容仅IE6可见<![endif]-->

6、IE6没法定义1px摆布高度的容器，是因为默许的行高形成的,处置惩罚的要领也有许多,
比方: overflow:hidden zoom:0.08 line-height:1px 

7、运用margin：0 auto；要领使容器居中依旧在IE6中行不通，我们要对其父容器运用text-align:center;

8、超链接接见递次L-V-H-A a:lind,a:visited,a:hover.a:active

9、Chrome中文界面下默许会将小于12px的文本强迫根据12px显现
处置惩罚方案：-webkit-text-size-adjust:none;

10、在运用相对定位/相对定位时，设置z-index在ie中可能会失效
是因为其元素依赖于其父元素的z-index，而父元素默许为0，所以子元素z-index高，而父元素低，依旧不会转变其显现递次；

javascript兼容

1、在规范的事宜绑定中绑定事宜的要领函数为 addEventListener,而IE运用的是attachEvent

2、规范浏览器采纳事宜捕捉的体式格局对应IE的事宜冒泡机制（即规范由最外元素至最内元素或许IE由最内元素到最外元素）末了规范方亦以为IE这方面的比较合理，所以便将事宜冒泡纳入了规范，这也是addEventListener第三个参数的由来，而且事宜冒泡作为了默许值。

3、事宜处置惩罚中event属性，规范浏览器是作为参数带入，而ie是window.event体式格局取得。

4、取得目的元素ie为e.srcElement 规范浏览器为e.target

5、IE下，能够运用猎取通例属性的要领来猎取自定义属性，也能够运用getAttribute()猎取自定义属性；
Firfox只能运用getAttribute()猎取自定义属性；
处置惩罚要领：一致运用getAttribute()

6、IE下，event对象有x,y属性，然则没有pageX,pageY属性；
   Firefox，event对象有pageX,pageY属性，然则没有x,y属性。
   处置惩罚要领：前提解释  <!--if lt ie>......<endif-->
    原文作者：bottle_
    原文地址: https://segmentfault.com/a/1190000007092892
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞