浏览器的兼容性

html5兼容

html5有很多新增的标签，在不支持html5的浏览器中不能正常显示。

css兼容

1、png24位的图片在ie6浏览器上出现背景，解决方案是做成png82、浏览器默认的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条件注释
    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:active9、Chrome中文界面下默认会将小于12px的文本强制按照12px显示解决方案：-webkit-text-size-adjust:none;10、在使用绝对定位/相对定位时，设置z-index在ie中可能会失效是因为其元素依赖于其父元素的z-index，而父元素默认为0，所以子元素z-index高，而父元素低，依然不会改变其显示顺序；

javascript兼容

1、在标准的事件绑定中绑定事件的方法函数为 addEventListener,而IE使用的是attachEvent2、标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值。3、事件处理中event属性，标准浏览器是作为参数带入，而ie是window.event方式获得。4、获得目标元素ie为e.srcElement 标准浏览器为e.target5、IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；Firfox只能使用getAttribute()获取自定义属性；解决方法：统一使用getAttribute()6、IE下，event对象有x,y属性，但是没有pageX,pageY属性；   Firefox，event对象有pageX,pageY属性，但是没有x,y属性。   解决方法：条件注释