CSS hack总结

CSS Hack的三种形式，CSS类内部Hack、选择器Hack以及CSS条件注释。

1. 类内部hack:

IE6专用hack下划线"_"， IE6,7能识别"*", "*+", "+", IE8,9支持"","9", Opera支持"9" 。

	IE6	IE7	IE8	IE9	Chrome	Firefox	Safari	Opera
_	√	×	×	×	×	×	×	×
+	√	√	×	×	×	×	×	×
*	√	√	×	×	×	×	×	×
*+	√	√	×	×	×	×	×	×
	×	×	√	√	×	×	×	×
9	×	×	√	√	×	×	×	√

<!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">
    <title>CSS hack Test</title>
    <style type="text/css">
    .box
    {
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        color: Black;
        color: Teal; /* 支持IE8,9 */
        color: Navy9; /* 支持IE8,9, Opera */
        *color: Red; /* 支持IE6, IE7 */
        *+color: Yellow; /* 支持IE6, IE7 */
        +color: Gray; /* 支持IE6, IE7 */
        _color: Green; /* IE6专用hack  */
    }
    </style>
</head>
<body>
<div class="box">
    test<br />
    test<br />
    test<br />
</div>
</body>
</html>

View Code

2. 选择器hack:比如 IE6能识别*html .class{}，IE7能识别*+html .class{}

<!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">
    <title>CSS hack selector Test</title>
    <style type="text/css">
    .box
    {
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        color: Black;
    }
    *html .box
    {
        color: Red;
    }
    *+html .box
    {
        color: Lime;
    }
    </style>
</head>
<body>
<div class="box">
    test<br />
    test<br />
    test<br />
</div>
</body>
</html>

View Code

3.CSS条件注释:CSS条件注释写在html代码里，只对IE系列的浏览器有效的一种hack,下面来介绍一下使用方法吧。

<!--[if XXX]>
这里是正常的html代码
<![endif]-->

它的基本结构形如html的注释(<!-->), 因此其他浏览器会把它当作注释而不会去解析它。
IE系列的浏览器能够识别并解析它的内容。
由于条件注释使用了html注释的结构，所以它只能在html页面中使用，而不能在css文件中，但是你可以用<link>标签引用外部CSS样式文件并放入条件注释中。

这里XXX是一些特定的东东，在此列表几个出来，详细介绍各自的含义：
<!--[if IE]> / 如果浏览器是IE /
<!--[if IE 6]> / 如果浏览器是IE 6 的版本 /
<!--[if IE 7]> / 如果浏览器是IE 7 的版本 /
<!--[if IE 8]> / 如果浏览器是IE 8 的版本 /

上面是几个常用的判断IE浏览器版本的语法，下面再来介绍一下相对比较少用的逻辑判断的参数：lte，lt，gte，gt及!
各自的详细解释如下：

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思

<link rel="stylesheet" type="text/css" href="css.css" />

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

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