博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

CSS Hack解决浏览器兼容性问题归总

Posted on 2008-05-04 10:13  linFen  阅读(439)  评论(0编辑  收藏  举报

对于网站前台设计师来说,众多浏览器间的CSS兼容问题从来都是非常棘手的。由于不Div+Css重构同的浏览器(常见的包括IE6,IE7,Firefox等)对CSS的解析和认知的不同,严重造成了浏览器页面效果的不一致,使得我们在进行DIV+CSS页面排版时,不得不时刻考虑到常见浏览器间的CSS兼容性问题。

什么是CSS Hack呢?为解决浏览器间的CSS兼容性问题,设计师们针对不同浏览器写不同的CSS code的过程,就是一个Hack的过程了。在这个过程中,不但要做到浏览器的兼容性,更要合理地做到CSS代码的绝对优化,尽可能少地人为制造冗余的代码,使CSS代码尽可能简练易读也是非常重要的工作之一。

为什么要用CSS Hack呢?答案很简单,通过对CSS代码的兼容性问题的解决,使得我们写出的页面能在不同的浏览器中达到统一的页面效果。不会出现IE浏览器中完好的页面拿到FF中去就横七竖八千疮百孔的事情。

CSS Hack的原理是什么?根据不同浏览器对CSS样式的支持程度,解析结果和识别CSS的优先级不同,设计师们就可以根据这些不同浏览器的特点来书写不同的CSS样式代码。IE6能识别下划线_和星号*,IE7能识别星号*,不能识别下划线_,而firefox两个都不能识别,如此,就可以针对IE6.IE7和FF通过对这些特殊符号的使用写不同的代码了。

<style>
div{
background:green; /* for FireFox */
*background:red; /* for IE7 */
_background:blue; /* for IE6 */
}
</style>

该样式显示的效果是:在FireFox中背景色为green;在IE7中背景色为red;在IE6中背景色为blue。

CSS解析的过程:CSS读取的顺序是由上至下,由左至右。在FireFox下,FireFox不能识别*和_,将下面的两行代码过滤掉不作任何解析,执行background:green;完后结束;在IE7下的解析结果为div{ background:green; *background:red; },根据CSS的优先级可以确定后面出现的样式会优先于前者被调用,即实现*background:red;的解析;在IE6下,因为三种样式代码都可以解析,解析结果为div{ background:green; *background:red; _background:blue;},但同样根据CSS的优先级,只会把最后一个样式读取,即_background:blue;被应用。

此外,!important声明也可以很好地提升指定样式规则的应用优先权。在IE6和FF中用!important声明可以提高优先级别,但在IE6中的!important声明会被之后的同名属性定义替换。所以,通过*和!important声明两者的搭配也可以很好地解决IE6,IE7和FF三者之间的兼容性问题。

区别IE6与FF:background:red; *background:blue;

区别IE6与IE7:background:green !important;background:blue;

区别IE7与FF:background:red; *background:green;

区别FF,IE7,IE6:background:red; *background:green !important; *background:blue;

注:IE都能识别*;FF不能识别*;IE6能识别*,但不能识别 !important;IE7能识别*,也能识别!important;FF不能识别*,但能识别!important;

  IE6 IE7 FF
* ×
!important ×

书写的顺序都是FireFox的写在前面,IE7的写在中间,IE6的写在最后面。

对于浏览器的兼容性的问题主要是padding/margin/width三个属性引起的,所以,在书写CSS样式时,协调好这三者的问题,对于CSS Hack有好大的好处。比如对于<div id=”content”><ul><li><a href=”#”>text</a></li></ul></div>这样一个层叠样式:<style> #content{ width:200px} #content ul{ margin:10px}</style>,在设计过程中,应尽量减少对content外层DIV盒子使用padding声明,而是通过对其内的块元素ul进行margin定义代替对外层DIV的padding定义。