Css Hack 技术

Css Hack 技术

    由于不同浏览器对于CSS解析结果不同，一段CSS代码在不同的浏览器下显示页面效果不一致，因此就需要写不同代码兼容各种浏览器，在不同的浏览器中都能得到预期的页面效果。
    这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack。

    CSS hack 的原理是不同的浏览器对CSS的支持及解析结果不一样以及CSS中的优先级的关系。

    以CSS中的背景颜色属性background为例，简单介绍在IE6、IE7和Firefox（以下简称FF）下的CSS hack的写法。

区分IE（包括ie6和ie7）和FF

div.bg_color{
    background:orange;*background:blue;
}

    在IE下是显示blue，在FF下是orange。IE可以识别CSS中的*，由于CSS得优先级关系，在IE中显示的是最后设置的blue，而FF由于不能识别*，对于带*的属性不做解析。

区分IE6和IE7

div.bg_color{
    background:orange !important;background:blue;
}

    在IE6显示为blue，IE7下为orange，因为IE6不支持!important而IE7支持。

区别FF，IE7，IE6：

1. background:orange; *background:green !important; *background:blue;

2. background:orange; *background:green;  _background:blue;

	IE6	IE7	FF
*	√	√	×
!important	×	√	√
_(下划线)	√	×	×

    不管用哪种方法书写，顺序都是firefox的写在前面，IE7其次，IE6的写在最后面。

    附一张来自国外比较完整的CSS hack列表，相信对我们的书写兼容性的CSS有很大帮助。