浏览器兼容

前端兼容性问题分三类

• 浏览器兼容问题

  • IE6、7、8不支持HTML5、CSS3、SVG标准，可被判定为“极难兼容”
  • IE9不支持Flex、Web Socket、WebGL，可被判定为“较难兼容”
  • IE10部分支持Flex（-ms-flexbox）、Web Socket，可被判定为“较易兼容”
  • IE11部分支持Flex、WebGL，可被判定为“较易兼容”
  • IE6、7、8、9可视为“老式浏览器”
  • IE10、11可视为“准现代浏览器”
  • Chrome、Firefox、Safari、Opera 、Edge可视为“现代浏览器”

• 屏幕分辩兼容问题

在不同的屏幕分辨率，浏览器页面展示差异很大。特别是屏幕分辨率较小时，容易发生布局错乱。为了解决这个问题，响应式UI框架应运而生

• 跨平台兼容问题

随着移动和平板市场的日益发展，Web在桌面、平板、移动平台上的兼容性问题日益突出。由于移动和平板是触摸式操作，与桌面的鼠标操作方式有很大差异，因此在不同平台上要做相应修改。为了解决这个问题，诞生了跨平台框架，在不同平台上，外观、布局、操作都有差异化修改

---

浏览器兼容问题

css

• 不同浏览器的标签默认的外边距和内边距不同

body {
  margin: 0;
  padding: 0;
}

• 前缀

  • Chrome（谷歌浏览器） 与 Safari（苹果浏览器） 内核：Webkit （中译无） 前缀：-webkit-

  • IE （IE浏览器） 内核：Trident （中译三叉戟） 前缀：-ms-

  • Firefox （火狐浏览器） 内核：Gecko（中译壁虎） 前缀：-moz-

  • Opera （欧朋浏览器） 内核：Presto（中译迅速） 前缀：-o-

    哪些属性需要加：

    • 动画keyframes、animation
    • 变形transform
    • 过度transition
    • 圆角border-radius
    • 阴影box-shadow
    • 弹性flex

js

• es6语法

IE11 不支持箭头函数、class 语法等（报 SCRIPT1002: 语法错误），不支持 Set 和 Map 数据结构（不报错）及 Promise 对象，支持 let 和 const; IE10 及以下不支持任何 ES6 语法。