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

一、css兼容

1.不同浏览器的标签默认的margin和padding不同
解决方案：
1.css里*{margin:0;padding:0;}但是性能不好
2.一般我们会引入reset.css样式重置

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

-moz-兼容火狐浏览器
-webkit兼容safari，谷歌浏览器
-o-兼容欧鹏浏览器
-ms-兼容IE浏览器

使用：

.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: