IE6/IE7/IE8/Firefox浏览器兼容CSS HACK代码+示例

菠萝对兼容性绝对是个外行,今天才开始正式学习这方面的知识,把今天学到的判断IE6/IE7/IE8/Firefox浏览器兼容性的方法整理到这,方便以后学习查阅之便。

1.区别IE和非IE浏览器CSS HACK代码:

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

2.区别IE6,IE7,IE8,FF CSS HACK
【区别符号】:「\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。

内容转自http://www.divcss5.com/css-hack/c286.html,感谢作者分享这么好的资源!

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2010.02.03

    兼容IE和fireFox的设为首页、加入收藏代码

    <!--/设为首页 加入收藏 兼容Fi…

  2. 没有图片

    2011.09.02

    WordPress主题:UnderWater

    UnderWater WordPress主题…

  3. 没有图片

    2009.12.02

    WordPress 2.9 Beta2发布公测

    WordPress 2.8.6刚 发布不久,…

  4. 没有图片

    2012.04.11

    收藏的各种LightBox控件

    在Web设计的时候,经常会用到LightBo…

  5. 没有图片

    2011.04.06

    博客升级到 WordPress 3.1.1

    昨天还在WordPress官方关注WordP…

  6. 没有图片

    2012.03.03

    精选15个CSS框架

    1.960 Grid System 960网…

评论

还没有评论。

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!