2023年6月21日发(作者：)
CSS浏览器兼容性与解决⽅法⼀.什么是浏览器兼容性问题？所谓的浏览器兼容性问题，是指不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况；⽽造成浏览器兼容问题的根本原因，是浏览器的内核不同导致的。认识浏览器内核
浏览器类型 内核 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）和优雅降级（gracefuldegradation）。渐进增强是指：针对低版本浏览器进⾏构建页⾯，保证最基本的功能，然后再针对⾼级浏览器进⾏效果、交互等改进和追加功能达到更好的⽤户体验。优雅降级是指：⼀开始就构建完整的功能，然后再针对低版本浏览器进⾏兼容。它们的区别在于：优雅降级以新版本浏览器为⽬标，从现状开始，并⾯向低版本浏览器，逐渐减少⽤户体验的供给。渐进增强以旧版本浏览器为⽬标，从⼀个⾮常基础的，能够起作⽤的版本开始，并不断扩充，以适应新版本浏览器的需要。降级（功能衰减）意味着往回看；⽽渐进增强则意味着朝前看，同时保证其根基处于安全地带。在代码风格上，优雅降级会优先书写新标准中的属性，以适应新版本浏览器，然后再补充旧版本浏览器中的书写⽅式，如下：
.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插件解决兼容问题
2023年6月21日发(作者：)
CSS浏览器兼容性与解决⽅法⼀.什么是浏览器兼容性问题？所谓的浏览器兼容性问题，是指不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况；⽽造成浏览器兼容问题的根本原因，是浏览器的内核不同导致的。认识浏览器内核
浏览器类型 内核 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）和优雅降级（gracefuldegradation）。渐进增强是指：针对低版本浏览器进⾏构建页⾯，保证最基本的功能，然后再针对⾼级浏览器进⾏效果、交互等改进和追加功能达到更好的⽤户体验。优雅降级是指：⼀开始就构建完整的功能，然后再针对低版本浏览器进⾏兼容。它们的区别在于：优雅降级以新版本浏览器为⽬标，从现状开始，并⾯向低版本浏览器，逐渐减少⽤户体验的供给。渐进增强以旧版本浏览器为⽬标，从⼀个⾮常基础的，能够起作⽤的版本开始，并不断扩充，以适应新版本浏览器的需要。降级（功能衰减）意味着往回看；⽽渐进增强则意味着朝前看，同时保证其根基处于安全地带。在代码风格上，优雅降级会优先书写新标准中的属性，以适应新版本浏览器，然后再补充旧版本浏览器中的书写⽅式，如下：
.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插件解决兼容问题
发布评论