条件注释 Conditional Comments

Firefox 下的换行问题早已不是一两天的事了,不过终究可以用折衷办法解决:在定义 width 的情况下定义:overflow: hidden。IE 当然早有办法,就是用:word-wrap: break-word,问题是 CSS2 不认这个用法,导致 CSS 总是无法通过 CSS Validator。不过,经过一番折腾,现在这个问题也不成问题了——就是传说中的条件注释Conditional Comments)。

IE Box Model Hack

先说说这个好象是个非常之有名的 CSS Hack,其实对这个我无甚了解。因为在我开始了解 CSS 的几年前就不用 IE5.5- 了,而我也相信现在几乎没人用(除非你还用Win98,或者你还在对兼容性这个话题孜孜不倦)。据说用下面两种方法可以解决(当然,都需要声明正确的文档类型):

div.content {
width:400px;
voice-family: “\”}\””;
voice-family:inherit;
width:300px;
}

html>body .content {
width:300px;
}

div.content {
width:300px !important;
width /**/:400px;
}

html>body .content {
width:300px;
}

CSS Hack For IE

有些时候,你需要对IE浏览器的bug定义一些特别的规则,这里有太多的CSS技巧(hacks),我只使用其中的两种方法,不管微软在即将发布的 IE7 beta 版里是否更好的支持CSS,这两种方法都是最安全的。

一般注释

  • 在IE中隐藏一个CSS定义,你可以使用子选择器(child selector)

    html>body p {
    /* declarations */
    }

  • 下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

    * html p {
    /* declarations */
    }

  • 还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用“反斜线”技巧:

    /* \*/
    * html p {
    declarations
    }
    /* */

条件注释

另外一种方法,我认为比 CSS Hacks 更加经得起考验就是采用微软的私有属性条件注释Conditional Comments)。用这个方法你可以给IE单独定义一些样式,而不影响主样式表的定义。就象这样:

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>

Conditional Comments

这个微软定义的东东就是今天我想说的主角,它既区别IE和非IE,又区别不同版本的IE。这样,将 word-wrap 之类的定义放在这个条件判断内,既不影响显示又可以规范CSS的合法性,爽!其实,依我看,它的应用远不止于CSS……

For IE:

<!–[if IE]> Only IE <![endif]–>
<!–[if IE 5.0]> Only IE 5.0 <![endif]–>
<!–[if gt IE 5.0]> Only IE 5.0+ <![endif]–>
<!–[if lt IE 6]> Only IE 6- <![endif]–>
<!–[if gte IE 6]> Only IE 6/+ <![endif]–>
<!–[if lte IE 7]> Only IE 7/- <![endif]–>

For Non-IE:

在注释中嵌套注释,这样首尾还原为两个注释,所以非IE浏览器可以显示中间的内容;而IE识别到“!IE”,所以将整个语句当成否定条件判断而不显示中间的内容。利用这样的用法即可在非IE中应用 Conditional Comments,酷!

<!–[if !IE]><!–> COOL!!! Non-IE <!–<![endif]–>
<!–[if IE 6]><!–> IE6 Or Non-IE <!–<![endif]–>

语法说明:

gt : greater than,选择条件版本以上版本,不包含条件版本
lt : less than,选择条件版本以下版本,不包含条件版本
gte : greater than or equal,选择条件版本以上版本,包含条件版本
lte : less than or equal,选择条件版本以下版本,包含条件版本
! : 选择条件版本以外所有版本,无论高低

使用注意:

将以上语法加在 IE 前,在 IE 后加上具体的版本号,注意如果写成“IE 5”则表示为IE5到IE6之间的所有版本的IE5系列,如果写成“5.0”则包括5.0、5.01等版本,不包括5.5,以此类推。

3 thoughts on “条件注释 Conditional Comments

  1. lhj

    I LIKE YOU
    有空到请我的51或我的个人网站上看看

  2. jsz

    以文会友,有空到请我的51或我的个人网站上看看(竹林听雨情感网)