前端升级路(1)——浏览器内核以及浏览器兼容性整理

浏览器内核

浏览器内核分为两部分:渲染引擎和js引擎,js引擎越来越独立,常说的浏览器内核一般指的是渲染引擎

当前主流渲染引擎内核:

  1. firefox使用gecko引擎
  2. IE使用Trident引擎
  3. Edge使用edge引擎
  4. opera初始使用presto引擎,后来弃用
  5. chrome\safari\opera使用webkit引擎
  6. 13年chrome、opera开始使用Blink引擎(从webkit fork出来的)

js引擎:

  1. Mozilla
  2. V8

浏览器兼容性问题

由于浏览器内核(渲染引擎和js引擎的不同),导致浏览器展现以及js执行的兼容性出现差异

html部分

  1. h5新标签在在IE9以下浏览器不识别,解决方法:

    可以将h5新标签转化为浏览器兼容的div等标签,css等尽量避免设置tag样式

css样式兼容性问题

  1. cssReset,css重置,常用*{padding:0;margin:0;},没有正确的,只有更合理的。
  2. 浏览器私有属性,autoprefixer
  3. 针对ie8以下hack
  4. IE6汇总
    • ie6浮动bug,图片下空白间距bug,display:block;
    • ie6没有min-width;
    • ie6中margin:0 auto;无法居中,解决方法:父级元素text-align:center;
    • ie6下无法设置1px行高,解决方法:设置overflow:hidden;或者设置line-height:1px;
    • ie6在使用绝对定位或者相对定位以后,z-index无效,因为其元素依赖父元素的z-index,但是父元素z-index默认为0;子高父低,所以顺序不会改变。

js的兼容性

  1. 事件绑定方法:标准事件为addEventListener,ie下为attachEvent
  2. 事件捕获方式不一致,标准documnet->element ,ie下element->document
  3. 事件的获取,标准event,ie是window.event,元素标准是event.target,ie中是window.event.srcElement
  4. 日期处理,早期的ie日期处理函数不是与1900的差值。
  5. ajax的实现方式,标准是XMLHttprequest,IE是activeXObject
  6. IE中不能操作tr的innerhtml
  7. 获取节点,标准是parentNode,parentNode.childNodes,IE中是parentElemnet和parentElement.children

拓展

1.事件绑定,事件捕获,事件冒泡