当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 解决IE5/IE5.5/IE6/FF的兼容性问题:CSS

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

CSS样式表 中的 解决IE5/IE5.5/IE6/FF的兼容性问题:CSS


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 51 ::
收藏到网摘: n/a

转自 蓝色理想
作者 bias
原文地址 http://www.blueidea.com/tech/site/2006/3296.asp
之前找了几个不同版本的可独立运行的IE浏览器,正好拿来试试页面的兼容性问题。不试不知道,在IE6和FF中没问题的页面在IE5和IE5.5中乱成一团,一直听说IE5是WEB标准制作的一个“钉子户”,现在不得不相信了。
既然有问题,那就找找解决的方法咯,在网上一搜,相关的文章还是不少的,觉得最直接的方法还是“IE条件注释”,很方便的就能为IE的不同版本写样式。但这样就得为每个版本写一个样式,不利于文件的优化。
找了一些相关的CSS HACK后,觉得应该可以把IE5/IE5.5/IE6/FF的HACK写到一起的,经过测试,终于找到了一个不错的方法,下面我们来看看怎么实现:
大家都知道用!important声明可以提升指定样式规则的应用优先权,如下面的例子:
-------------------------------------------------
复制代码 代码如下:

E1{
background-color: red !important;/*提升优先权*/
background-color: blue;
}
-------------------------------------------------
但这样写在IE中会有个问题,看过我的《关于CSS样式表优先级》和《关于CSS样式表优先级补遗》,你会知道在IE6和FF中用!important声明可以提高优先级别,但在IE6中的!important声明并不是绝对的,它会被之后的同名属性定义所替换。也就是说在上面的例子中,IE6所应用的是最后一个背景色的值,即“blue”;而在FF中背景色的值为“red”。根据这一点,我们就可以把FF和IE的样式分离开。
OK ,解决了FF和IE的问题,现在来解决IE自己的问题。
看过了嘟嘟的《绕过IE6支持IE5的别一种写法-IE也支持">"》后有感而发,使用“>”IE是否真的可以认得?我们来看个例子:
-------------------------------------------------
E1{
background-color: red;
>background-color: blue;
}
-------------------------------------------------
在FF中得到的是背景色红色,而在IE中得到的背景色是蓝色,根据样式重定义的规则,如果浏览器可以识别“>”,则应该得到的蓝色的背景,因此可以知道“>”只有IE可以识别,这点是很重要的哦!在后面大家就会知道了。(注:我测试过其它的一些符号,如“~”、“`”、“<”等,都只有IE可以识别,在此为了感谢嘟嘟,推荐使用“>”)
我们再来看个例子:
-------------------------------------------------
E1{
>/*IE only*/background-color: black;
>/*IE only*/background-color /*IE5.5*/: green;
}
-------------------------------------------------
这个例子在IE6中得到了黑色的背景;而在IE5.5中得到的绿色的背景;在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别,这是个很早就公布的HACK,可以在网上找到相关的资料,要注意的就是在属性名之后是有一个空格的。到此我们已经把FF、IE5.5、IE6分离出来了,那IE5呢?其实现在我们只要把IE5跟IE6分开就OK了,来看看例子:
-------------------------------------------------
E1{
>/*IE only*/background-color: red;/*IE5*/
}
E1/*IE5.5+*/{
>/*IE only*/background-color: black;
}
-------------------------------------------------
这里我们又用到一个HACK,就是“E1/**/{}”,这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是,在IE5中的背景色为红色;在IE5以上版本中得到的是黑色背景。
终于把不同版本的浏览器都分离出来了,这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子:
-------------------------------------------------
E1{
width: 500px;
height: 50px;
background-color: red !important;/*FF*/
background-color: blue;/*IE5*/
text-align:center;
}
E1/*IE5.5+*/{
>/*IE only*/background-color: black;/*IE6*/
>/*IE only*/background-color /*IE5.5*/: green;
}
-------------------------------------------------
需要注意的是,在上面例子中“background-color”定义的顺利不能改变,即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“>”,因为“E1/**/{}”这个HACK在FF中可以识别。也许你会想,上面的例子不是可以写成:
-------------------------------------------------
E1{
width: 500px;
height: 50px;
background-color: red;/*FF*/
>background-color: blue;/*IE5*/
text-align:center;
}
E1/*IE5.5+*/{
>/*IE only*/background-color: black;/*IE6*/
>/*IE only*/background-color /*IE5.5*/: green;
}
-------------------------------------------------
这样不就又可以省下几个字节?是没错,可是HACK不是标准,如果滥用HACK,那只会离标准越来越远!