前端常见浏览器兼容性问题解决方案

• 不同浏览器因为内核不同，所以对网页解析存在一定的差异。
• 浏览器 内核主要分为两种，一种渲染引擎，一种是js引擎
• 浏览器兼容问题一般指：css兼容、js兼容

浏览器及其内核：

• Chrome（谷歌）：之前Webkit，现在是Blink
• Opera（欧朋）：现在是谷歌的Blink内核
• Firefox（火狐）：Gecko
• Safari（苹果）：webkit
• IE：Trident

CSS兼容

1. 不同浏览器的标签默认的margin和padding不同

• 问题: 标签，不加样式控制的情况下，各自的margin 和padding差异较大。
• 可以在css里*{margin:0;padding:0;}，但是性能不好，所以我们一般会引入reset.css样式重置

2. css3新属性，加浏览器前缀兼容早期浏览器

• -moz- /* 火狐浏览器 /
• -webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
• -o- / Opera浏览器(早期) /
• -ms- / IE */

3. 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题

• 问题: 常见症状是IE6中后面的一块被顶到下一行
• 所以要设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

4. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

• 问题: 设置div高度小于10px，IE6、7和遨游里div的高度，超出自己设置的10px.
• 可以给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

5. 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

• 问题：IE6里的间距比超过设置的间距
• 需要在display:block;后面加入display:inline;display:table;

6. IE浏览器div最小宽度和高度的问题

• 问题： IE浏览器div最小宽度和高度不生效
• IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

7. 超链接访问过后hover样式就不出现的问题

• 被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A
• a:link {}
• a:visited {}
• a:hover {}
• a:active {}

8. 图片默认有间距

• 问题：几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。
• 可以使用float属性为img布局(所有图片左浮)

9. css hack解决浏览器兼容性

• 不同浏览器，识别不同的样式，csshack本身就是处理浏览器兼容的。

js兼容

1. 事件绑定

IE: dom.attachEvent();
标准浏览器： dom.addEventListener(‘click’,function(event){},false);
如果浏览器不支持 addEventListener()方法, 你可以使用 attachEvent()方法替代。

2. event事件对象问题

    document.onclick=function(ev){
   //谷歌火狐的写法，IE9以上支持，往下不支持；
        var e=ev;
        console.log(e