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

更新日期: 2019-06-24阅读: 2.3k标签: 兼容

一.什么是浏览器兼容性问题?

所谓的浏览器兼容性问题,是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况;而造成浏览器兼容问题的根本原因,是浏览器的内核不同导致的。
认识浏览器内核  

浏览器类型            内核                        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插件解决兼容问题


链接: https://www.fly63.com/article/detial/3874

CSS/CSS3常用的样式兼容,样式总结

这篇文章主要介绍了css中常用但是又难记的样式作为总结,方便大家学习和使用。包括了‘单行缩略号‘、’css圆角兼容’、‘元素阴影’,‘border取消宽度影响’,‘css3的背景渐变’,‘css的透明’等等

CSS3 nth-child的使用,详解css中nth的作用,以及nth-child的兼容写法

:nth-child是css3的一个比较常用的选择器。它用于匹配属于其父元素中的子元素,不论元素的类型。 它的参数可以是数字、关键词或公式。

CSS 3中-webkit-, -moz-, -o-, -ms-这些私有前缀的含义和兼容

css3作为页面样式的表现语言,增加了很多新的属性,但是部分css3属性在一些浏览器上还处于试验阶段,所以为了有效的显示css3的样式,对应不同的浏览器内核需要不同的前缀声明。

css定义变量_css原生变量的使用和兼容 附带还有更高性能,文件更高压缩率的好处

在开发中,css样式有一些属性往往需要重复使用,为了避免代码冗余,降低维护成本。我们需要使用CSS预编译工具【Sass/Less/Stylus】,随着这些工具的流行,CSS变量也开始规范制定,目前很多浏览器都已经支持了

caniuse.com_判断浏览器对css3、html5的兼容性测试工具

caniuse.com 是一个工具性的网站,帮助人们了解各个浏览器以及它们的不同版本对 HTML5、CSS3 等高级特性的支持情况。直接在上面的输入框中输入想要搜索的属性。然后结果就直接出来了。

web浏览器在线兼容性测试工具_检测html网页在不同浏览器上的兼容问题

对于web前端开发者而言,为了确保html代码在不同浏览器上能正常工作,是一件很麻烦的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,下面就为大家推荐一下比较流行的web浏览器在线兼容性测试工具。

原生js兼容写法_在ie标准下的兼容性写法

经常使用原生js,就要考虑到一些浏览器上的兼容,尤其是IE,下面就整理关于js的一些兼容性写法

解决IE不兼容document.getElementByClassName()的实现方法

在使用原生js时候,需要通过class样式名来获取dom对象,发现在IE8以下是不支持document.getElementByClassName()这种方法的。那么我们如何来实现获取classname的兼容写法呢?

es6之解构赋值

es6的语法已经出了很长的时间了,在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法,这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势

document.head.appendChild(element) 在 IE8 及以下报错

问题:在开发中会遇到动态添加 script 标签的情况。但是在 IE8 以下会报如下错误:SCRIPT5007: Unable to get value of the property appendChild: object is null or undefined,解决办法如下

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!