IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例
整理关于IE6、IE7、IE8、Firefox兼容性问题
1.区别IE和非IE浏览器CSS
#divcss5 |
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)
【区别符号】:「*」、「!imp
【示例】:
#divcss5{ background:blue; /*Firefox 背景变蓝色*/ *background:green !imp *background:orange; /*IE6 背景变橘色*/ } |
【说明】:IE7可以辨识「*」和「!imp
5.区别IE7、Firefox
【区别符号】:「*」、「!imp
【示例】:
#divcss5{ background:blue; /*Firefox 背景变蓝色*/ *background:green !imp } |
【说明】:因为Firefox可以辨识「!imp
6.区别IE6、IE7 (EXP 1)
【区别符号】:「*」、「_」
【示例】:
#tip { *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } |
【说明】:IE7和IE6都可以辨识「*」(米字号),但IE6可以辨识「_」(底线),IE7却无法辨识,透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。
7.区别IE6、IE7 (EXP 2)
【区别符号】:「!imp
【示例】:
#divcss5{ background:black !imp background:orange; /*IE6 背景变橘色*/ } |
8.区别IE6、Firefox
【区别符号】:「_」
【示例】:
#divcss5{ background:black; /*Firefox 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ } |
以上包括了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!imp
引用
显示效果:
IE6:blue
IE7:green
FF/IE8:orange
原理:IE6能识别-,IE7能识别+,IE8和FF都不能识别+和-
IE8/FF都不识别*,IE7优先识别!imp
关于IE8的hacks:
.test{
color:/*\**/#00f\9; /* IE8 on
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]-->