浏览器兼容

一、浏览器内核

五大主流浏览器：IE浏览器、Opera浏览器、Safari浏览器、Firefox浏览器、Chrome浏览器
四大内核：Trident内核(也称IE内核)、Webkit、Chrome、Blink

1. IE浏览器内核：Trident内核，俗称IE内核
2. Chrome浏览器内核：统称Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核
3. Firefox浏览器内核：Gecko内核，俗称Firefox内核
4. Safari浏览器内核：Webkit内核
5. Opera浏览器内核：最开始是自己的Presto内核，后来是Weblit内核，现在是Blink内核
6. 360浏览器、猎豹浏览器内核：IE + Chrome双核
7. QQ、搜狗、遨游浏览器内核：Trident(兼容模式) + Webkit(高速模式)
8. 百度浏览器、世界之窗内核：IE内核
9. 2345浏览器内核：以前是IE内核，现在是IE + Chrome双核

二、CSS兼容问题

• 不同浏览器标签默认的内外补丁不同
  方法：CSS里{margin:0;padding:0;}

• 块属相标签float后，又有横向的margin情况下，IE6中会比设置的大
  方法：在float的标签样式中添加display：inline;将其转化为行内属性

• 设置较小高度标签(一般小于10px)，在IE6、IE7、遨游中高度超出自己设置高度
  方法：给超出高度的标签设置overflow:hidden，或设置行高line-height小于你设置的高度
  备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高

• 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二种）
  问题症状：IE6里的间距会超过设置的间距
  方法：在display:block;后面加display:inline;display:table;

• 图片默认有间距
  问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距
  方法：使用float为img布局
  备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道

三、js兼容

• 事件绑定
  addEventListener()兼容Fierfox、Chrome、Safari、Opera、IE9+
  attachEvent()兼容IE7、8

function click(obj,event){