实例讲解符合中国特色的和网络现状的实用CSS Hack(附源码)

首先解释一下标题的定语：

• 实例讲解的：文章中会出现可以运行并可立即看到结果的实例代码。
• 符合中国特色的：中国网民使用最多的浏览器是IE和FireFox。所以这些CssHack主要是为了解决这2种浏览器的兼容问题。中国电脑用户的操作系统主要是Windows，所以这些CssHack主要针对Windows操作系统浏览器，并不包含Mac等。
• 符合网络现状的：现在网民中最多使用的浏览器是IE6（或者IE6内核的浏览器），其次是IE7（或者IE7内核的浏览器），再次是FireFox。所以这些CssHack主要是为了解决这3种浏览器的兼容问题。
• 实用的：这些CssHack都是比较简单而且有效的。

多说两句：

1. 首先应该明确的是：尽量不要使用css hack，因为它的向后兼容是未知的。
2. 基于现在中国互联网的现状,这里主要对IE6，IE7和FF的最常用且实用的css Hack进行了介绍，但是并不表示css只有这些。（比较完整请访问:CSS hack浏览器兼容一览表 ）
3. 有些其实已经不是css hack了，而是css的一些新的选择器，例如"#div1>#div2"和"#div1:first-child",对于这样的选择器一般可以放心的使用，因为有较好的向后兼容性。

正文

下面的CssHack在这些浏览器中有效:
下面的CssHack在这些浏览器中无效:

#div1:first-child {
    color : red ;
}

#div1>#div2 {
    font-size : 200% ;
}

html[xmlns] #div2 {
    text-decoration : underline ;
}

下面的CssHack在这些浏览器中有效:
下面的CssHack在这些浏览器中无效:

#div2 {
    *border : 2px solid red ;
}

下面的CssHack在这些浏览器中有效:
下面的CssHack在这些浏览器中无效:

#div2 {
    _width : 100px ;
}

* html #div2 {
    height : 100px ;
}

下面的CssHack在这些浏览器中有效:
下面的CssHack在这些浏览器中无效:

*+html #div2 {
    background-color : yellow
}

下面是完整的代码，你可以在不同的浏览器下浏览以便查看效果。

<! doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
     < meta  name ="Keywords"  content ="YES!B/S!"   />
     < meta  name ="Description"  content ="This page is from http://Justinyoung.cnblogs.com"   />
     < title > CSS/Javascript demo </ title >
     < style  type ="text/css" >
        * {
            font-size : medium ;
            margin : 2px ;
            padding : 2px ;
         }
         /*
        valid    :    FF    IE7 OP8
        invalid    :    IE6
         */
        #div1:first-child {
            color : red ;
         }
        #div1>#div2 {
            font-size : 200% ;
         }
        html[xmlns] #div2 {
            text-decoration : underline ;
         }
         /*
        valid    :    IE6    IE7
        invalid    :    FF    OP8
         */
        #div2 {
            *border : 2px solid red ;
         }
        
         /*
        valid    :    IE6
        invalid    :    FF    IE7
         */
        #div2 {
            _width : 100px ;
         }
        * html #div2 {
            height : 100px ;
         }
         /*
        valid    :    IE7
        invalid    :    FF    IE6
         */
        *+html #div2 {
            background-color : yellow
         }
         /* Test Min-height */
        #div3 {
            border : 1px dotted green ;
            width : 100px ;
             /* min-height is valid in FF and IE7.
              it's very important for kill "auto height" problem */
            min-height : 100px ;
            height : 50px ;
         }
     </ style >
</ head >
< body >
< div  id ="div1" >
     < div  id ="div2" >
     i'm test text.
     </ div >
     < div  id ="div3" >
        test min-height!
     </ div >
     < p >
        首先应该明确的是：尽量不要使用css hack，因为它的向前兼容是未知的。 < br />
        基于现在中国互联网的现状,这里主要对IE6，IE7和FF的最常用且实用的css Hack进行了介绍，但是并不表示css只有这些。 < br />
        有些其实已经不是css hack了，而是css的一些新的选择器，例如"#div1>#div2"和"#div1:first-child",对于这样的选择器一般可以放心的使用，因为有较好的向后兼容性。
     </ p >
</ div >
</ body >
</ html >

三种浏览器的最终效果图：