常见的浏览器的兼容问题解决方案

color=#000000 size=1">

前言

---

一、浏览器的兼容问题？

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

浏览器 内核（渲染引擎）

Chrome谷歌	之前Webkit，已改Blink内核
FireFox火狐	Gecko
Safari苹果	Webkit
IE	Trident
Opera欧朋	现已改用Google Chrome的Blink内核

二、css兼容

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

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

碰到频率: 100%

解决方案：
CSS里 *{margin:0;padding:0;} 但是性能不好
一般我们会引入reset.css样式重置；
备注： 这个是最常见的也是最易解决的一个浏览器兼容性问题，所有的CSS文件开头都会用样式重置各个标签的内外补丁是0。

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

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