如何解决浏览器css的兼容问题?

什么是浏览器兼容性问题?如何解决浏览器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)和优雅降级(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其它相关文章!

推荐阅读