浏览器的兼容性

浏览器的兼容性

html5兼容

html5有不少新增的标签，在不支持html5的浏览器中不能正常显示。
解决方法：
使用html5的静态资源；
加入脚本代码，document.createElement建立新的标签，并display:block;设置为块类型

css兼容

一、png24位的图片在ie6浏览器上出现背景，解决方案是作成png8

二、浏览器默认的margin和padding不一样，解决方案是 * {margin:0;padding:0;}

三、IE6双边距bug:块属性标签float后，又有横行的margin状况下，在ie6显示margin比设置的大
    
    浮动ie产生的双倍距离
    #box {
        float:left;
        width:10px;
        margin:0 0 0 10px;
    }
    这种状况下ie会产生20px的距离
    解决方案是在float的标签样式中加入_display:inline;(_这个符号只有ie6会识别)
    
四、IE兼容
    渐进识别的方式
    
    首先，"\9"将IE9浏览器从全部状况下分离出来
    接着，"+"将IE8和IE七、IE6分离开来
    .box{
        background-color:#f1ee18;  //全部均可识别
        background-color:#00deff\9;   //IE六、七、8
        +background-color:#a200ff;   //IE六、7
        _background-color:#1e0bd1;    //IE6
    }

---

五、IE条件注释
<!--[if IE 6]>此处内容仅IE6可见<![endif]-->

六、IE6没法定义1px左右高度的容器，是由于默认的行高形成的,解决的方法也有不少,
例如: overflow:hidden zoom:0.08 line-height:1px 

七、使用margin：0 auto；方法使容器居中依然在IE6中行不通，咱们要对其父容器使用text-align:center;

八、超连接访问顺序L-V-H-A a:lind,a:visited,a:hover.a:active

九、Chrome中文界面下默认会将小于12px的文本强制按照12px显示
解决方案：-webkit-text-size-adjust:none;

十、在使用绝对定位/相对定位时，设置z-index在ie中可能会失效
是由于其元素依赖于其父元素的z-index，而父元素默认为0，因此子元素z-index高，而父元素低，依然不会改变其显示顺序；

javascript兼容

一、在标准的事件绑定中绑定事件的方法函数为 addEventListener,而IE使用的是attachEvent

二、标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦以为IE这方面的比较合理，因此便将事件冒泡归入了标准，这也是addEventListener第三个参数的由来，并且事件冒泡做为了默认值。

三、事件处理中event属性，标准浏览器是做为参数带入，而ie是window.event方式得到。

四、得到目标元素ie为e.srcElement 标准浏览器为e.target

五、IE下，可使用获取常规属性的方法来获取自定义属性，也可使用getAttribute()获取自定义属性；
Firfox只能使用getAttribute()获取自定义属性；
解决方法：统一使用getAttribute()

六、IE下，event对象有x,y属性，可是没有pageX,pageY属性；
   Firefox，event对象有pageX,pageY属性，可是没有x,y属性。
   解决方法：条件注释  <!--if lt ie>......<endif-->