CSS Hacks / Conditional Comments For IE

浏览器一多,问题就多,现在IE7也出来,我又多了一个要考虑的浏览器
IE7与IE6相比还是有很大的区别的,跟FF也有不一样的地方
在这里先不讲有哪些区别,主要来讲如何解决这些问题
放在以前都是用CSS Hack来解决IE6以下(包括IE^)以及Firefox(下面简称FF)的问题
例:

div.content {
width:300px !important; //大部分支持!important标记的浏览器使用这里的数值
width /**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，FF也一样支持/**/,所以他读到的也是width的值是400px
}

由于大部分用的就是IE6还有FF,所以这两个区别,我在写页面的时候,主要用来兼容IE和FF.

可是前两天发现,IE7可以解析width /**/:400px;这样就完蛋了
我为FF写的,IE7不是也能读到了,那要怎么办呢
Conditional Comments
这个微软定义的东东就是今天我想说的主角-----IE的条件注释，它既区别IE和非IE，又区别不同版本的IE。这样，将 word-wrap 之类的定义放在这个条件判断内，既不影响显示又可以规范CSS的合法性，爽！其实，依我看，它的应用远不止于CSS……
条件注释是只能在IE下使用，因此我们可以通过条件注释来为IE添加特别的指令。
条件注释从IE5开始被支持，它可能在IE5.0,5.5,6,7里有区别。
比如,你可以在页面顶部写:

<!--[if lt IE 6]>
<style>
.logo {
 margin-left: 10px;
}
</style>
<![endif]-->

这样就只有IE6可以识别了~
在写条件注释有下面几点要注意的
1.条件注释的基本结构和HTML的注释(<!-- -->)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
2.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
3.条件注释使用的是HTML的注释结构，因此他们 只能使用在HTML文件里，而不能在CSS文件中使用。我很想把所有特殊的样式放在logo.css里。但是很不幸的是，这看起来不太可能。我也试过根据条件注释，使用<link>来导入一个额外的样式表，但是因为我只需要一个额外的样式规则，这样会让事情变得复杂很多。当然如果你需要在IE里使用很多的额外的样式，那么使用<link>或许是一个好的方法。
就象这样：

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

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，酷！

[color=#8B0000]<!--[if !IE]><!--> COOL!!! Non-IE <!--<![endif]-->[/color]
<!--[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，以此类推。

说了这么多,那最后怎么来解决IE6/IE7/FF的兼容性的问题呢
假设他们三个的数值都不一样
可以这样

<style>
.logo{
   width:400px;  //这句所有浏览器都可以读到,包括FF
}
</style>
<!--[if gte IE 5]>
<style>
.logo{
    width:300px; //我句包括IE5在内的IE以上版本都可以读到
}
</style>
<![endif]-->
<!--[if IE 7.0]>
<style>
.logo{
 width:350px; //这句就只有IE7可以读到
}
</style>
<![endif]-->

根据先后,后面的定义可以覆盖前面的定义
所以得出这样的结果
在FF下读到的是  width:400px;
包括IE5在内的IE以上版本读到   width:300px;
而IE7虽然也可以读到前两句,但被最后一句width:350px; 覆盖,所以读到的是width:350px;