宅虫网首页 |  游戏频道 |  发号中心 |  游戏库 |  美图 |  视频 |  八卦 |  技术宅 |  生活宝典 |  宅家园
|加入收藏

宅虫网技术宅频道

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" 。

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<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 >
<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]-->
顶一下
返回首页
回首页
收藏
收藏

参与评论(条)
登陆发评论有几分拿哦！

最新评论（共有 条评论）

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

当前栏目分类

链接