一、类内部Hack

IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important, 
IE7能识别*,也能识别!important; 
FF不能识别*,但能识别!important;
IE6支持下划线,IE7和firefox均不支持下划线。

  IE6 IE7 FF
* ×
!important ×
_ × ×

  下面给出一个实例,在google,火狐下显示红色,IE7显示绿色,IE6显示蓝色的实例。

  1. <head>
  2. <title>CSS_Hack测试</title>
  3. <style type="text/css">
  4. .div1{ background-color:Red; *background-color:Green; _background-color:blue; width:200px;height:200px; }
  5. </style>
  6. </head>
  7. <body>
  8. <div class="div1">
  9. google:红色,IE7:绿色,IE6:蓝色
  10. </div>
  11. </body>

  改代码最终显示效果为

   

  一般来说,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

  这样对于IE7来说,写在后面的优先级高,能够覆盖原本给所有浏览器看的。而对于IE6来说,由于写在后面的优先级较高,能够覆盖原本写给IE7和IE6共同看的。而又不会影响到IE7。

  !important的作用,且看下面这行代码

  .div1{ background-color:blue; }  标记为重要,因此IE7与火狐都会认为其优先级较高,从而忽略后面的"background-color:blue;" 而对于IE6来说,因此识别不了!important,因此直接跳过改行代码,显示为蓝色。

  IE8 IE9 Hack

   \9 仅仅IE6789支持,常常用于区分IE与火狐

   \0 仅仅IE8 IE9都支持

   \9\0  仅仅IE9支持

  如以下代码,在火狐,google显示红色,IE8显示蓝色,IE9显示color:Fuchsia色,IE7显示color:Aqua色,IE6显示黑色。

  其实方法都一样,共同支持的写在前面,单独支持的写在后面,以覆盖共同支持的。

  .div1{ background-color:blue\0; /* ie 8/9*/ background-color:Fuchsia\9\0; *background-color:Aqua; _background-color:Black }

二、选择器Hack

  *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

  1. <head>
  2. <title>CSS_Hack测试</title>
  3. <style type="text/css">
  4. .div1 { background-color:red; } /* FireFox */
  5. *html .div1 { background-color:blue; } /* ie6 fixed */
  6. *+html .div1 { background-color:green; } /* ie7 fixed, 注意顺序 */
  7. </style>
  8. </head>
  9. <body>
  10. <div class="div1">
  11. google:红色,IE7:绿色,IE6:蓝色
  12. </div>
  13. </body>

  以上代码可以理解为:先设置全部浏览器为红色,在设置IE浏览器为蓝色,在设置IE7为绿色。

注意: 
*+html 对IE7的HACK 必须保证HTML顶部有如下声明: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

CSS Hack还是尽量少用,我看别人的网站一般都看不到Hack代码。页面布局如果合理,基本上是不用写Hack的。

一些方法总结:

  浮动在IE6里产生的双倍距离问题,可以加个display:inline;来解决

    .div1{float:left; width:100px; margin-left:100px;}

  例如这段代码,在IE6里                    而在google里

        

三、HTML头部引入Hack

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

实例根据不同的IE实例引入不同的CSS文件。

  1. <head>
  2. <title></title>
  3. <!--[if IE 6]> <link href="test.css" rel="stylesheet" type="text/css" /> <![endif]-->
  4. <!--[if IE 7]> <link href="test1.css" rel="stylesheet" type="text/css" /> <![endif]-->
  5. </head>
  6. <body>
  7. <div class="div1">
  8. <!--[if IE 6]> 我是IE6浏览器 <![endif]-->
  9. <!--[if IE 7]> 我是IE7浏览器 <![endif]-->
  10. </div>
  11. </body>

    IE6显示效果为:          IE7显示效果为:

              

    此头部Hack能够仅仅在希望输出的浏览器输出代码。例如上例中,根据不容的浏览器引入不同的CSS文件,根据不同的浏览器显示不同的文字等等。

CSS之Hack的更多相关文章

  1. css常用hack

    原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...

  2. 【必备】史上最全的浏览器 CSS & JS Hack 手册(转)

    浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向 ...

  3. css if hack之兼容ie

    1.Css if hack条件语法< !--[if IE]> Only IE <![endif]-->仅所有的WIN系统自带IE可识别< !--[if IE 5.0]&g ...

  4. 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明

    自从安装了IE8.0正式版本!木头 就对基本的几个 CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助! 本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象 ...

  5. 针对IE的CSS样式hack

    针对IE的CSS样式hack,如下: 例子:background:#000: 1.只针对IE6的hack方式(_):_background:#000: 2.只针对IE7的hack方式(+):+back ...

  6. 关于css的hack问题

    <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> 取值: <keywords> ...

  7. 前端学习 -- Html&Css -- 条件Hack 和属性Hack

    条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keyw ...

  8. 【必备】史上最全的浏览器 CSS & JS Hack 手册

    [必备]史上最全的浏览器 CSS & JS Hack 手册   浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技 ...

  9. 史上最全的浏览器 CSS & JS Hack 手册

    浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向 ...

  10. 【收藏】史上最全的浏览器 CSS & JS Hack 手册

    浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向 ...

随机推荐

  1. Box.net获5000万美元投资(SAAS博士)

    9月29日,据国外媒体报道,“云”存储服务商Box.net已经从Salesforce等投资者获得新一轮融资5000万美元. Box.net过去的投资者也参与了新一轮的融资.最终,在CRM巨人Sales ...

  2. codility上的问题 (21) Upsilon 2012

    这是我目前最喜欢的codiltiy上的问题之一.问题描述是:给定一个整数数组A,所有的数均不相同.假设下标从0开始,找到一个数组B, 满足A[B[0]] > A[B[1]] > A[B[2 ...

  3. Mac OS X Mavericks使用手册

    基本信息 作者: 施威铭研究室 出版社:清华大学出版社 ISBN:9787302386018 上架时间:2014-12-30 出版日期:2015 年1月 开本:16 版次:1-1 所属分类: 计算机 ...

  4. 2013第49周三IE9文档模式

    今天完善了原有模块的代码和注释,然后继续之前新模块的开发,并写了两边的service接口,除了因为邮件中有部分问题让我分心外,专心下来写代码的感觉真好,今天基本上没遇到多少让我新感悟的技术问题,就总结 ...

  5. C++ Primer笔记1_转义字符_标准库类型string_标准库类型vector

    1.转义字符 一般有两种方式: \x后紧跟1个或多个十六进制数字.或\后紧跟1.2.3个八进制数字,当中数字部分是字符相应的数值. #include <iostream> using na ...

  6. java实现点名,并记录被点次数

    java实现点名,并记录被点次数 import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStrea ...

  7. ci 笔记

    一.CI的HelloWorld! 注意:CI禁止直接通过文件目录来访问控制器. ./application/controllers/hello.php 1 <?php 2 //放止用户直接通过路 ...

  8. Git 版本回退问题详解

    版本回退 git log    ,  git reset --hard xxxx回退到以前的版本 git reflog,  git reset --hard xxx 回退到将来的版本 现在,你已经学会 ...

  9. JavaScript --------------继前面继承方式-------总结

    创建对象方式: 工厂模式:使用简单的函数创建对象,为对象添加属性和方法,然后返回对象: function createPerson(name,age,job){ var o = new Object( ...

  10. jquery列表动画

    //新闻导航 (function (){ //获取分类名称 var _text = $('.news .news-wrapper .news-left .news-left-title .positi ...