什么是浏览器兼容性问题?
所谓的浏览器兼容性问题,是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况;而造成浏览器兼容问题的根本原因,是浏览器的内核不同导致的。
认识浏览器内核
浏览器类型 内核 JS引擎
IE Trident JScript
Firefox Gecko TraceMonkey
Chrome WebKit, Blink V8
Safari WebKit SquirrelFish Extreme
Opera Presto Carakan
CSS浏览器兼容性问题的解决思路和方案
1、使用CSS Hack解决兼容性问题
浏览器在读取CSS代码的时候可能会遇到一些无法识别的代码,造成这种现象的原因通常有两种:
代码本身有问题,如: bg:red ,bg并不是一个有效的css属性
代码没问题,但浏览器的内核不能识别,如: 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插件解决兼容问题
更多前端开发知识,请查阅 HTML中文网 !!
以上就是如何解决浏览器css的兼容问题?的详细内容,更多请关注易知道|edz.cc其它相关文章!