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

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

一、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属性需要加前缀：

1.定义关键帧动画@keyframes
2.css3中的变形(transform)、过渡(transtion)、动画(animation)
3.border-radius 圆角
4.box-shadow  盒子阴影
5.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; }