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. 没有图片

    2013.10.30

    WordPress模板开发获取优酷视频缩略图

    有时写WEB程序时本文主要介绍WordPre…

  2. 没有图片

    2012.10.20

    HTML5在线视频播放器 FlowPlayer

    FlowPlayer 是一个用Flash开发…

  3. 没有图片

    2009.08.31

    UCenter Home access denied for agent changed 错误解决办法

    UCenter Home 2.0 正式版 出…

  4. 没有图片

    2013.10.08

    Adobe Photoshop CC 14.0 简体中文精简绿色版

    Adobe Photoshop CC 是 A…

  5. 没有图片

    2014.12.22

    Debian Nginx 如何添加虚拟主机

    这段时间折腾阿里云,开始是用CentOS加固…

  6. 没有图片

    2009.07.05

    WordPress 2.8 浏览统计插件 WP-PostViews 下载+设置教程

    浏览统计插件WP-PostViews下载地址…

评论

还没有评论。

About

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