浏览器兼容性总结

介绍前端常见的几个兼容性问题

1.input
input 设置左右padding之后，ie中输入过多内容后，padding消失。
解决方法：在外面套一层div设置宽高，padding然后设置input的宽高为100%

2.在设置float的div在IE下设置margin时会产生双边距，这是IE6的一个典型bug，
解决方法是加上display:inline;

3.Ie6下定义1px高的div
ie6默认div高度为一个字体显示的高度，所在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字体的高度

overflow:hidden; || zoom:0.08; || line-height:1px;

4.chrome浏览器 中文界面下默认会将小于12px 的文本强制按照12px 显示,可通过加入 CSS 属性-webkit-text-size-adjust: none;解决.

5.各个浏览器默认的内外边距不同
解决 ：
*{margin:0;padding:0;}

1. IE6 width为奇数，右边多出1px的问题
   问题：
   父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1像素
   解决：
   将宽度的奇数值改成偶数

7.IE6两个层之间3px的问题
问题：
左边层采用浮动，右边没有采用浮动时在ie6中两层之间就会产生3像素的间距
解决：
A、右边层也采用浮动 float
B、左边层添加属性 margin-right:-3px;

1. 除去滚动条的问题
   问题：
   隐藏滚动条
   解决：
   1、只有ie6-7支持
   2、除ie6-7不支持 body{overflow:hidden}
   3、所有浏览器 html{overflow:hidden}

9、标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；

10.封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7)

funtion getStyle(obj,name){
    if(obj.currentStyle){
        //IE
        return obj.currentStyle[name];
    }else{
        //Chrom,FF
        return getComputedStyle(obj,false)[name];
    }
}
    调用：getStyle(oDiv,'width');