CSS hack总结

时间:2014-02-18 23:38:23  来源:cnblog  作者:不灭的野火

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

1. 类内部hack:

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

  IE6IE7IE8IE9ChromeFirefoxSafariOpera
_ × × ×××× ×
+ × × × × ××
* × × × × ××
*+ × × × × ××
\0 × × × × ××
\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\0; /* 支持IE8,9 */
        color: Navy\9; /* 支持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>

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>

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的简写,也就是大于的意思。

! :就是不等于的意思

<!--[if gt IE 7]> / 如果IE版本大于7 /
 <!--[if lte IE 6]> / 如果IE版本小于等于6 /
 <!--[if !IE]> / 如果浏览器不是IE /
 ......
 看到这里相信大家都已经明白了条件注释的用法了,OK,那来举个例子吧:
 <!-- 默认先调用css.css样式表 -->
 <link rel="stylesheet" type="text/css" href="css.css" />
 <!--[if !IE]>
 <!-- 非IE下调用1.css样式表 -->
 <link rel="stylesheet" type="text/css" href="1.css" />
 <![endif]-->
 <!--[if lt IE 6]>
 <!-- 如果IE浏览器版本小于6,调用2.css样式表 -->
 <link rel="stylesheet" type="text/css" href="2.css" />
 <![endif]-->


顶一下
返回首页
回首页
收藏
收藏

参与评论(条)

注: 网友评论仅供表达个人看法,并不表达本站同意其观点或证实其描述

当前栏目分类