您的位置：首页 > Web前端 > CSS

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

2011-11-23 09:42 429 查看

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

整理关于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文件：



<link href="css/IE7style.css" rel="stylesheet" type="text/css" />





<link href="css/IE6style.css" rel="stylesheet" type="text/css" />





<link href="css/IE8style.css" rel="stylesheet" type="text/css" />



注释相应的Css 内容：



</style>

<![endif]-->



</style>

<![endif]-->



</style>

<![endif]-->

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航