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

前言

不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是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-keyframes fadeIn {
   
	0% {
    opacity: 0; } 100% {
    opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
   
	0% {
    opacity: 0; } 100% {
    opacity: 0; }
}

---

3. 块属性标签float后，又有横