解决ie5/ie5.5/ie6/ff的兼容性问题——css
之前找了几个不同版本的可独立运行的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,那只会离标准越来越远!
Java Asp PHP .Net XML C/C++ CGI VB Jsp J2ee J2se J2me EJB Servlet Tomcat Resin Struts Weblogic Eclipse ANT GUI JMS Web servise IDEA Webphere Hibernate Spring Jboss Applet Swing Socket Javamail Perl Ajax P2P 安全 模式 框架 测试 开源 游戏
Windows XP Windows 2000 Windows 2003 Windows Me Windows 9.x Linux UNIX 注册表 操作系统 服务器 应用服务器