CSS hack 用CSS条件注释实现

秋子淡无痕

条件注释只能在windows Internet Explorer(以下简称IE)下使用，因此我们可以通过条件注释来为IE添加特别的指令。

通俗点，条件注释就是一些if判断，但这些判断不是在脚本里执行的，而是直接在html代码里执行的，比如：

1. <!--[if IE]>  
   
2. 这里是正常的html代码  
   
3. <![endif]-->  

复制代码

1，条件注释的基本结构和HTML的注释(<!-- -->)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
2，IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
3，条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。

可使用如下代码检测当前IE浏览器的版本（注意：在非IE浏览器中是看不到效果的）

1. <!--[if IE]>  
   
2.         <h1>您正在使用IE浏览器</h1>  
   
3.         <!--[if IE 5]>  
   
4.                 <h2>版本 5</h2>  
   
5.         <![endif]-->  
   
6.         <!--[if IE 5.0]>  
   
7.                 <h2>版本 5.0</h2>  
   
8.         <![endif]-->  
   
9.         <!--[if IE 5.5]>  
   
10.                 <h2>版本 5.5</h2>  
    
11.         <![endif]-->  
    
12.         <!--[if IE 6]>  
    
13.                 <h2>版本 6</h2>  
    
14.         <![endif]-->  
    
15.         <!--[if IE 7]>  
    
16.                 <h2>版本 7</h2>  
    
17.         <![endif]-->  
    
18. <![endif]-->  

复制代码

那如果当前的浏览器是IE，但版本比IE5还低，该怎么办呢，可以使用<!--[if ls IE 5]>，当然，根据条件注释只能在IE5+的环境之下，所以<!--[if ls IE 5]>根本不会被执行。
lte         就是Less than or equal to的简写，也就是小于或等于的意思。
lt         就是Less than的简写，也就是小于的意思。
gte         就是Greater than or equal to的简写，也就是大于或等于的意思。
gt         就是Greater than的简写，也就是大于的意思。
!         就是不等于的意思，跟javascript里的不等于判断符相同.

严格地说是属于CSS hack。因为就好象其他真正的css hack一样，它使得我们可以给一些浏览器赋予特殊的样式，再则它不依赖于某个浏览器的BUG来控制另外一个浏览器（的样式）。除此之外，条件判断还能用来做一些超出CSS HACK范围的事情(虽然这种情况很少发生)。

因为条件判断不依赖于某个浏览器的hack,而是一个经过深思熟虑的特色功能，所以我相信它是可以被放心地使用的。当然，其他浏览器也有可能支持条件判断（到目前为止还没有），但是看起来，他们应该不会使用如<!--[if IE]>这样的语法。

应该如何应用条件注释

本文一开始就说明了，因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样，具体就是对CSS的解释不同，我们为了兼容这些，可运用条件注释来各自定义，最终达到兼容的目的。比如：

1. <!-- 默认先调用css.css样式表 -->  
   
2. <link rel="stylesheet" type="text/css" href="css.css" />  
   
3. 
   
4. <!--[if IE 7]>  
   
5. <!-- 如果IE浏览器版是7,调用ie7.css样式表 -->  
   
6. <link rel="stylesheet" type="text/css" href="ie7.css" />  
   
7. <![endif]-->  
   
8. 
   
9. <!--[if lte IE 6]>  
   
10. <!-- 如果IE浏览器版本小于等于6,调用ie.css样式表 -->  
    
11. <link rel="stylesheet" type="text/css" href="ie.css" />  
    
12. <![endif]-->

复制代码

这其中就区分了IE7和IE6向下的浏览器对CSS的执行，达到兼容的目的。同时，首行默认的css.css还能与其他非IE浏览器实现兼容。

注意：默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。

比如如下代码，在IE浏览器下执行显示为红色，而在非IE浏览器下显示为黑色。如果把条件注释判断放在首行，则不能实现。该例题很能说明网页对IE浏览器和非IE浏览器间的兼容性问题解决。

1. <style type="text/css">  
   
2. body{  
   
3. background-color: #000;  
   
4. }  
   
5. </style>  
   
6. <!--[if IE]>  
   
7. <style type="text/css">  
   
8. body{  
   
9. background-color: #F00;  
   
10. }  
    
11. </style>  
    
12. <![endif]-->

复制代码

同时，有人会试图使用<!--[if !IE]>来定义非IE浏览器下的状况，但注意：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。

正常就是默认的样式，对IE浏览器需要特殊处理的，才进行条件注释。

admin

1. /* Internet Explorer */
   
2. 
   
3. /* IE 6 only */
   
4. body #ie6 {
   
5.      _display: block;
   
6. }
   
7. 
   
8. /*IE 6 and IE 7 */
   
9. #ie6andie7 {
   
10.      *display: block;
    
11. }
    
12. 
    
13. /* IE 7 only */
    
14. html > body #ie7 {
    
15.     *display: block;
    
16. }
    
17. 
    
18. /* IE 6, IE 7 and 8 */
    
19. body #ie6andie7andie8{
    
20.     display:block\9;
    
21. }   
    
22. 
    
23. /* IE 8 only */
    
24. body #ie8{
    
25.     display:block\9;
    
26.     *display: none; /*overrule for ie6 and ie7 which also read this rule*/
    
27. }
    
28. 
    
29. 
    
30. /* Firefox */
    
31. 
    
32. /*Firefox 2 and 3 */
    
33. #firefox2, x:-moz-any-link {
    
34.     display: block;
    
35.     *display: none; /*overrule for ie6 and ie7 which also read this rule*/
    
36. }
    
37. 
    
38. /*Firefox 3 only (for Firefox 2 only use the rule above and this to overwrite for Firefox 3*/
    
39. #firefox3, x:-moz-any-link, x:default {
    
40.     display: block;
    
41.     *display: none; /*overrule for ie6 and ie7 which also read this rule*/
    
42. }
    
43.   
    
44. /* Safari */
    
45. @media screen and (-webkit-min-device-pixel-ratio:0) {
    
46.     #safari {
    
47.         display: block;
    
48.     }
    
49. }
    
50.    
    
51. /* Opera */
    
52. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    
53.     head~body #opera {
    
54.         display: block;
    
55.     }
    
56. }

复制代码

1. .css{
   
2. padding:10px;
   
3. padding:9px\9; /* all ie */
   
4. padding:8px\0; /* ie8-9 */
   
5. *padding:5px; /* ie6-7 */
   
6. +padding:7px; /* ie7 */
   
7. _padding:6px; /* ie6 */
   
8. }

复制代码

admin

浏览器探测：JS/后端程序判断

1. // 以jQuery为例，检测是否是IE6，是则加上class="ie6"  
   
2. if ($.browser.msie && $.browser.version = 6 ){  
   
3. $('div').addClass('ie6');  
   
4. }

复制代码