« 百度最新实用功能--汉字拆字查询Buzrr网站现身 或成Google buzz下的Tweetmeme »

如何书写兼容IE和Firefox的CSS

ckqee | 2010-02-26 23:55 | 字体:

由于不同浏览器对于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支持。

区别FFIE7IE6

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有很大帮助。
CSS hack列表


转载请注明:天空巴士 - www.sky84.cn
本文链接地址:http://www.sky84.cn/index.php/article_content_id,188.html
发表评论
gavatar