css3低版本浏览器兼容性问题

css3低版本浏览器兼容性问题

1. 什么是浏览器兼容性问题？
   浏览器内核不同，对同一段代码会有不同的解析，就会造成页面效果不统一的情况，进而造成浏览器兼容性问题。
   各个浏览器内核：

   浏览器类型     内核               JS引擎
   IE               Trident             JScript
   Firefox         Gecko           TraceMonkey
   Chrome      Webkit,Blink      V8
   Safari       Wbkit      SquirrelFish Extreme
   Opera      Presto      Carakan

2. 解决思路及方案

一、浏览器css样式初始化
由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化，以防不同浏览器的显示效果不一样。

*{
 margin: 0;
 padding: 0;
}

二、优雅降级以及渐进增强

渐进增强是指：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级是指：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
它们的区别在于：
优雅降级以新版本浏览器为目标，从现状开始，并面向低版本浏览器，逐渐减少用户体验的供给。
渐进增强以旧版本浏览器为目标，从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应新版本浏览器的需要。
降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
在代码风格上，优雅降级会优先书写新标准中的属性，以适应新版本浏览器，然后再补充旧版本浏览器中的书写方式，如下：

.border{
border-raiuds:3px;
-webkit-border-raiuds:3px;
-ms-border-raiuds:3px;
-moz-border-raiuds:3px;
-o-border-raiuds:3px;
}

渐近增强会优先书写浏览器特有的属性，以适应旧版本浏览器，然后再补充新标准中的属性，如下：

.border{
-webkit-border-raiuds:3px;
-ms-border-raiuds:3px;
-moz-border-raiuds:3px;
-o-border-raiuds:3px;
border-raiuds:3px;
}

三、使用现代化的css插件解决兼容问题。