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

对于网站前台设计师来说，众多浏览器间的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;

书写的顺序都是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定义。