IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

来源:互联网 发布:专题片男生配音软件 编辑:程序博客网 时间:2024/03/29 13:28

IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例  



IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例 - rongrjianxin - 烽火戏诸侯

 

整理关于IE6、IE7、IE8、Firefox兼容性问题

1.区别IE和非IE浏览器CSS

 #divcss5
{
     background:blue; /*非IE 背景藍色*/
     background:red \9; /*IE6、IE7、IE8背景紅色*/
  }

2.区别IE6,IE7,IE8,FF
【区别符号】:「\9」、「*」、「_」
【示例】:

 #divcss5{
background:blue; /*Firefox 背景变蓝色*/
background:red \9; /*IE8 背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
 【说明】:因为IE系列浏览器可读「\9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就会让浏览器正确的读取到自己看得懂得CSS语法,所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

3.区别IE6、IE7、Firefox (EXP 1) 
【区别符号】:「*」、「_」
【示例】:

 #divcss5{
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:IE7和IE6可读「*」(米字号),IE6又可以读「_」(底线),但是IE7却无法读取「_」,至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」,因此就可以透过这样的差异性来区分IE6、IE7、Firefox

4.区别IE6、IE7、Firefox (EXP 2) 
【区别符号】:「*」、「!important」
【示例】:

 #divcss5{
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
*background:orange; /*IE6 背景变橘色*/
}
【说明】:IE7可以辨识「*」和「!important」,但是IE6只可以辨识「*」,却无法辨识「!important」,至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

5.区别IE7、Firefox 
【区别符号】:「*」、「!important」
【示例】:

 #divcss5{
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
}
【说明】:因为Firefox可以辨识「!important」但却无法辨识「*」,而IE7则可以同时看懂「*」、「!important」,因此可以两个辨识符号来区隔IE7和Firefox。

6.区别IE6、IE7 (EXP 1) 
【区别符号】:「*」、「_」
【示例】:

 #tip {
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】:IE7和IE6都可以辨识「*」(米字号),但IE6可以辨识「_」(底线),IE7却无法辨识,透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。

7.区别IE6、IE7 (EXP 2) 
【区别符号】:「!important」
【示例】:

 #divcss5{
background:black !important; /*IE7 背景变黑色*/
background:orange; /*IE6 背景变橘色*/
}【说明】:因为IE7可读取「!important;」但IE6却不行,而CSS的读取步骤是从上到下,因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS,所以背景色会呈现橘色。

8.区别IE6、Firefox 
【区别符号】:「_」
【示例】:

 #divcss5{
background:black; /*Firefox 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}【说明】:因为IE6可以辨识「_」(底线),但是Firefox却不行,因此可以透过这样的差异来区隔Firefox和IE6,有效达成CSS hack。

以上包括了IE6\IE8\IE7\火狐浏览器兼容问题及解决方法。

 

FF和IE 6 7 8 要全兼容了,碰到要单独Hack IE8的。当然,用注释非常方便,只要添加相应的注释就可以解决。但问题是,为了一句CSS写多一个文件,或者在header上添加注释,那显然不是懒人的习惯做法。结论如下:

当然,注意顺序。根据CSS的优先性,上面的写法,分别针对Firefox、IE8、IE7和IE6显示值。让我们看看这个演示:

演示的CSS代码如下:

p.ie{ 
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15; 
color:blue; // 所有浏览器 
color:brown\9; // 所有IE浏览器 
+color:red; // IE7 
_color:green; // IE6 
}


注意下面介绍的这些hack写法仅适用于XHTML1.0。如果没有在HTML最前加上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
那么效果将不一样!此外,这里所说的IE8,不是指IE8的兼容模式,因为IE8的兼容模式其实就是IE7。
区别IE6、7与FF/IE8:
background:blue;*background:orange;
引用
显示效果:
IE 6/7:orange
FF/IE8:blue
原理:FF/IE8不支持*开头,而IE6/7都支持。
区别IE6与IE7/IE8/FF:
background:green;_background:blue;
引用
显示效果:
IE7/8/FF:green
IE6:blue
原理:IE6支持下划线"_",IE7、8和firefox均不支持下划线。
区别FF/IE8和IE6/7:
background:orange;+background:green;-background:blue;
或者
background:orange;*background:green!important;*background:blue;
引用
显示效果:
IE6:blue
IE7:green
FF/IE8:orange
原理:IE6能识别-,IE7能识别+,IE8和FF都不能识别+和-
IE8/FF都不识别*,IE7优先识别!important,IE6不能识别!important。


关于IE8的hacks:
.test{
color:/*\**/#00f\9; /* IE8 only */
color:#00f\9; /* 适用于所有IE版本 */
}
可同时区分IE8、IE7、IE6、Firefox的CSS hacks:
.test{
color:#000; /* Firefox */
color:/*\**/#00f\9; /* IE8 */
*color:#f00; /* IE7 */
_color:#0f0; /* IE6 */
}
添加相应的注释解决兼容性问题
注释相应的Css文件:
<!--[if IE 7]><!-->
<link href="css/IE7style.css" rel="stylesheet" type="text/css" />
<!-->
<![endif]-->
<!--[if IE 6]><!-->
<link href="css/IE6style.css" rel="stylesheet" type="text/css" />
<!-->
<![endif]-->
<!--[if gte IE 8]><!-->
<link href="css/IE8style.css" rel="stylesheet" type="text/css" />
<!-->
<![endif]-->
注释相应的Css 内容:
<!--[if ie 6]>
<style>
<!--
#warp{ padding-bottom:11px;}
-->
</style>
<![endif]-->
<!--[if ie 7]>
<style>
<!--
#warp{ padding-bottom:11px;}
-->
</style>
<![endif]-->
<!--[if ie 8]>
<style>
<!--
#warp{ padding-bottom:11px;}
-->
</style>
<![endif]-->