浏览器

现在各种各样的浏览器很多，但究其根本都是基于以下几种内核的。

IE浏览器：trident内核（据官方消息，今年6月15日就会停止此浏览器的所有服务）；

FireFox浏览器：geoko内核（是以C++编写的渲染引擎）；

Safari浏览器：webkit内核；

Chrome浏览器：Blink内核；

Opera浏览器：以前是presto内核，现在改为Blink内核；

360浏览器：兼容模式（trident内核）、极速模式（Blink内核）；

常见的浏览器兼容问题

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

现在最常用的解决方法应该就是使用通配符 *了；

在css中 *｛
      margin:0;
      padding:0;
｝

2-常量定义

在IE浏览器中，仅可通过var来定义常量，其他如FireFox浏览器可使用const和var来定义常量，若需考虑IE兼容问题，则统一使用var来定义常量。

3-event.srcElement（可能见到的不多）

IE浏览器中，有srcElement属性，却没有target属性；而在FireFox等浏览器中，没有srcElement属性，有target属性。

解决这一问题可以使用一个三元表达式：srcObj =event.srcElement ? event.srcElement : event.target

4-ajax请求问题

在IE浏览器中为ActiveXObject，而在其他浏览器中为xmlHttpReuest；

5-事件绑定监听

IE浏览器中为dom.attachEvent();而其他浏览器为dom.addEventListener();

6-tr的HTMl

在IE9浏览器以下的版本中是不允许操作tr的innerHTML

7-innerText可以在IE浏览器适用，在FireFox中不适用

这种问题解决方式如下：

if(navigator.appName.indexOf("Explorer")  >   -1){undefined
       document.getElementById('element').innerText   =  "my   text";
}   else{undefined
        document.getElementById('element').textContent  =   "my   text";
}
复制代码

8-FireFox和IE盒模型

如

 div{
    width:100px;
    border:1px;
 }
复制代码

IE浏览器会解读为width：100px; 而FireFox会解读为width:100 + 1*2px;这里可以借助！important来解决这个问题，在IE浏览器中是无法识别！important的。而其他浏览器可以。可以采用如下的方式来解决。

div{
   margin:30px !important;
   margin:20px;
}

9-IE中margin加倍的问题

IE6中，设置在float下的div的margin会加倍。这时可以使用display：inline来解决。

10-图片间距

在多个img布局时，图片之间会默认有边距，及时我们令margin为0，这是可以使用float布局的方式来解决。