浏览器的兼容性

2024年1月24日 67次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞