CSS在各大浏览器中兼容问题处理方法

        我们在用CSS+DIV写网站的时候,就定义边距20px的问题,在火狐、google浏览器以及IE7以上版本下将会按照20px来执行,而在IE6下却仍然按照40px来执行,挺头疼的问题是浏览器兼容的问题。刚开始学习这个兼容问题也是难点。所以有时候我们为各个浏览器写不同的CSS,用的时候用语句判断是什么浏览器就调用相应的CSS,一般要用if语句或js判断。那么还有另一个CSS中非常重要的属性!important。

       !important是CSS就定义的语法,作用是提高指定样式规则的应用优先权。语法格式{ Rule !important; },即写在定义的最后面,例如:box{color:red !important;} 。

       最重要的一点是:IE6一直都不支持这个语法,而火狐IE8等浏览器支持。因此我们就可以利用这一点来分别给IE6和其他浏览器不同的样式定义,例如,我们定义这样一个样式:
.color {
border: 30px  solid #60A179 !important;
border: 30px  solid #00F;
padding: 40px;
width : 300px;
}

在火狐中浏览时候,能够理解!important的优先级,因此显示#60A179的颜色:

在IE6中浏览时候,不能够理解!important的优先级,因此显示#00F的颜色:

       可以看到,利用!important,我们可以针对IE6和其他浏览器设置不同的样式,其他浏览器样式的后面加上!important。举一反三,包括margin、padding在不同浏览器中解析的不一样可以使用!important属性控制。

       一般IE8对很多CSS语法还是支持了,我觉得这方面像火狐等浏览器学习的。但是IE6在国内市场份额还是非常大的,所以说考虑网站兼容性问题是网站实现人员必须考虑的东西。希望这篇博文对你有用。

发表评论