web前端各浏览器兼容性问题

对 ES 语法的支持上

• ES6 的兼容问题
  项目打包的时候 webpack 中用 babel-loader 处理
• Flex 布局兼容性问题

---

不同浏览器的差异

• 不同浏览器的标签默认的外边距( margin )和内边距(padding)不同
  css 里增加通配符 * { margin: 0; padding: 0; }

FireFox 问题

• cursor:hand VS cursor:pointer
  firefox 不支持 hand 解决方法: 统一使用pointer
• event.srcElement问题
  这是一个非标准的属性，默认情况下我们使用 event.target 因为 FireFox 不支持此属性
• 对象宽高赋值问题
  FireFox 中类似 obj.style.height = imgObj.height 的语句无效。
  解决方法：统一使用 obj.style.height = imgObj.height + ‘px';
• innerText 在 FireFox 中不能正常工作 ，需用 textContent。

IE 问题

• 盒子模型
  • IE：怪异盒模型，盒子的大小=width（content + border + padding） + margin
  • 其他浏览器：标准盒模型，盒子的大小 = content + border + padding + margin
  • 可以用 IE 不能识别 !important 这个属性来解决问题
  • 还可以为 box-sizing 赋三个值：
    1.content-box： 默认值，border 和 padding 不算到 width 范围内，可以理解为是 W3c 的标准模型 ( default )
    2.border-box：borde r和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒模型
    3.padding-box：将 padding 算入 width 范围

• 事件绑定
  IE：dom.attachEvent()， 其他浏览器：dom.addEventListener();
• 阻止默认行为
  IE：return false ，其他浏览器：e.preventDefault()
• 阻止事件冒泡
  IE：e.cancelBubble = true，其他浏览器：e.stopPropagation()
• 操作tr的html
  在 ie9 及以下，不能操作tr的innerHTML，利用 td 支持 innerHTML 为他们添加
• ajax略有不同
  IE: ActiveXObject，其他浏览器：xmlHttpReuest