css3低版本浏览器兼容性问题
什么是浏览器兼容性问题?
浏览器内核不同,对同一段代码会有不同的解析,就会造成页面效果不统一的情况,进而造成浏览器兼容性问题。
各个浏览器内核:
浏览器类型 内核 JS引擎
IE Trident JScript
FirefoxGeckoTraceMonkey
Chrome Webkit,Blink V8
Safari Wbkit SquirrelFish Extreme
Opera Presto Carakan
解决思路及方案
一、浏览器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插件解决兼容问题。