CSS浏览器兼容性与解决方法

Posted 2022-02-05 youwei716

一.什么是浏览器兼容性问题？
所谓的浏览器兼容性问题，是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况；而造成浏览器兼容问题的根本原因，是浏览器的内核不同导致的。
认识浏览器内核  
浏览器类型            内核                        JS引擎  
IE                     　Trident                     JScript  
Firefox                 Gecko                     TraceMonkey  
Chrome              WebKit, Blink                 V8  
Safari                   WebKit                 SquirrelFish Extreme  
Opera                   Presto                     Carakan  

CSS浏览器兼容性问题的解决思路和方案

1.使用CSS Hack解决兼容性问题
浏览器在读取CSS代码的时候可能会遇到一些无法识别的代码，造成这种现象的原因通常有两种：  
1. 代码本身有问题，如： bg:red ，bg并不是一个有效的css属性  
2. 代码没问题，但浏览器的内核不能识别，如： box-sizing:border-box ，这句代码本身没有问题，但由于使用的是CSS3的属性box-sizing ，会造成在一些低版本内核的浏览器中无法识别。  
总之，当浏览器遇到这些无法识别的代码时，它会怎么做呢？和java、C#等后端语言不同，浏览器不会中止程序的执行，它会立即跳过这些无法识别的代码，就当作没看见一样，继续执行后面的代码。就向下面这个例子一样：

.main
color1 : red; /*这句代码无法被浏览器识别，浏览器就当这句代码不存在*/
color: green;

 浏览器方面，除了拥有这种特殊的错误处理方式之外，不同的浏览器内核，以及浏览器内核的不同版本，它们同时拥有自己独特的CSS属性，这些属性在CSS标准之外。造成这种现象的原因是一些历史遗留问题。
比如，webkit内核的浏览器能够识别-webkit-box-sizing:border-box; ，在没有box-sizing的年代，它就是通过-webkit-box-sizing 来设置盒子宽高影响范围的，但其他内核的浏览器是无法识别该属性的。当然，其他内核的浏览器也拥有自己的一些特有属性，是同样的道理。

2. 浏览器CSS样式初始化

由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显示效果不一样。

* 
 margin: 0; 
 padding: 0; 

3. 渐近增强和优雅降级
由于我们的网页需要适应不同型号、以及同型号不同版本的浏览器。面对这么多的浏览器，就算使用Hack技术，我们也无法保证所有的样式都能正常的应用到浏览器中，比如，你无法把动画效果应用到IE5中。如果你的项目需要考虑那些旧版本的浏览器，你就会面临上面的困境。
如何处理呢？
我们的总体思路是：网页在新版本的浏览器中要应用新的效果；网页在旧版本的浏览器中可以没有新的效果，但不要布局错乱。以上是总体思路，而面对不同的项目时，可能有侧重点的不同。比如，政府网站一般会侧重考虑旧版本浏览器；而互联网应用项目会侧重考虑新版本浏览器。

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

.transition
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;

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

.transition 
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;

4.使用现代化的CSS插件解决兼容问题