浏览器内核

  • Trident(IE)
  • Blink(Chrome、Opera)
  • Webkit(Safari)
  • Gecko(Firefox)

兼容性问题

是什么

  • 相同的代码在不同的浏览器上显示的效果不一样

原因

  • 各个浏览器使用不同的内核，在处理同一个事件的时候思路不同

  • 同一浏览器，版本越旧，存在的缺陷越多，对新属性和标签的支持就越少

分类

  • 样式相关：体现在布局效果上
  • 脚本相关：包括JS和DOM、BOM方面的问题
  • 浏览器自身提供的功能

处理思路

  • 根据兼容需求选择技术框架(jquery)
  • 根据兼容需求选择兼容工具：html5shiv、postcss等
  • 条件注释：CSS Hack、js能力检测

JS兼容性处理

  1. addEventListener与attachEvent

attachEvent ——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera。
addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8

1
2
3
4
5
6
7
8
9
10
11
function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) { // W3C标准
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent) { // IE
    var r = elm.attachEvent('on' + evType, fn); // IE5+
    return r;
  } else {
    elm['on' + evType] = fn; // DOM事件
  }
}
  1. document.formName.elements[“itemName”]

​ 作用：引用表单对象的elements属性。IE下，可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]；Firefox 下，只能使用 document.formName.elements["elementName"]。解决方案：统一使用 document.formName.elements["elementName"]。

  1. 集合类对象问题

​ 问题说明：IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ] 获取集合类对象。解决方案：统一使用 [] 获取集合类对象。

  1. 自定义属性问题

​ 问题说明：IE下可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。解决方案：统一通过 getAttribute() 获取自定义属性。

  1. eval(‘idName’)问题

​ 问题说明：IE下，可以使用 eval("idName") 或 getElementById("idName") 来取得 id 为 idName 的HTML对象；Firefox下，只能使用 getElementById("idName") 来取得 id 为 idName 的HTML对象。解决方案：统一用 getElementById("idName") 来取得 id 为 idName 的HTML对象。

  1. 变量名与某HTML对象ID相同

​ 问题说明：IE下HTML对象的ID可以作为 document 的下属对象变量名直接使用，Firefox下则不能；Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。解决方案：使用 document.getElementById("idName") 代替 document.idName。最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上 var 关键字，以避免歧义。

  1. var问题

​ 问题说明：Firefox下，可以使用 const 关键字或 var 关键字来定义常量；IE下，只能使用 var 关键字来定义常量。解决方案：统一使用 var 关键字来定义常量。

  1. input.type属性问题

​ 问题说明：IE下 input.type 属性为只读；但是Firefox下 input.type 属性为读写。解决方案：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的 input，然后在同样的位置再插入一个新的 input 元素。

  1. window.event问题

​ 问题说明：window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的 event 只能在事件发生的现场使用。解决方案：在事件发生的函数上加上 event 参数，在函数体内(假设形参为 evt )使用 var myEvent = evt?evt:(window.event? window.event:null)