前端常见浏览器兼容性问题解决方案

前言：

不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎
所以浏览器兼容性问题一般指：css兼容、js兼容

浏览器

内核（渲染引擎）

Chrome谷歌

之前Webkit，已改Blink内核

FireFox火狐

Gecko

Safari苹果

Webkit

IE

Trident

Opera欧朋

现已改用Google Chrome的Blink内核

一、css兼容

---

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

问题症状： 随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率: 100%

解决方案：

1. CSS里 *{margin:0;padding:0;} 但是性能不好
2. 一般我们会引入reset.css样式重置；

备注： 这个是最常见的也是最易解决的一个浏览器兼容性问题，所有的CSS文件开头都会用样式重置各个标签的内外补丁是0。

---

2. css3新属性，加浏览器前缀兼容早期浏览器

-moz- /* 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE */

哪些css3属性需要加：

定义关键帧动画 @keyframes
css3中的变形（transform）、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow  盒子阴影
flex  弹性布局
....

使用：

.myClass {-webkit-animation-name: fadeIn;-moz-animation-name: fadeIn;-o-animation-name: fadeIn;-ms-animation-name: fadeIn;animation-name: fadeIn;  /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-key