注意点：

网上很多资料中常常把!important也作为一个hack手段，其实这是一个误区。!important常常被我们用来更改样式，而不是兼容hack。造成这个误区的原因是IE6在某些情况下不主动识别!important,以至于常常被人误用做识别IE6的hack。可是，大家注意一下，IE6只是在某些情况下不识别（ie6下，同一个大括号里对同一个样式属性定义，其中一个加important 则important标记是被忽略的，例：{background:red!important; background:green;} ie6下解释为背景色green，其它浏览器解释为背景色red；如果这同一个样式在不同大括号里定义，其中一个加important 则important发挥正常作用，例：div{background:red!important} div{background:green}，这时所有浏览器统一解释为背景色red。）
实例讲解：

Hack应用情境（一）

适用范围：IE:6.0,IE7.0,IE8.0之间的兼容

实例说明：
此例中我们使用了渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，此时，我们的IE8已经独立识别。

实例代码：

  1. .bb{
  2. height:32px;
  3. background-color:#f1ee18;/*所有识别*/
  4. .background-color:#00deff\; /*IE6、7、8识别*/
  5. +background-color:#a200ff;/*IE6、7识别*/
  6. _background-color:#1e0bd1;/*IE6识别*/
  7. }

/*一个用于展示的class为bb的div标签*/
< div class ="bb"></ div >

Hack应用情境（二）

适用范围：IE:6.0,IE7.0,IE8.0,Firefox之间的兼容

实例说明：
大家很容易的可以看出这是情境（一）的加强版，适用于更广泛的环境。其实情境（一）中也已经做到了把火狐与IE游览器区分开来了，现在我们要做的是把火狐从其它游览器中再次识别出来。大家仔细看下代码，大家会发现其实游览器识别是很简单的。火狐如何识别？对了，IE中对伪类支持不广泛，所以伪类是个不错的途径。(.yourClass,x:-moz-any-link, x:default)注意，这个区分伪类往往IE7也能识别，所以最好还需要把IE7单独识别出来，且此方法对ff3.6 已无效，firefox的区分可以使用@-moz-document url-prefix(){}

实例代码：

  1. .bb{
  2. height:32px;
  3. background-color:#f1ee18;/*所有识别*/
  4. background-color:#00deff\9; /*IE6、7、8识别*/
  5. +background-color:#a200ff;/*IE6、7识别*/
  6. _background-color:#1e0bd1;/*IE6识别*/
  7. }
  8. .bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */
  9. @-moz-document url-prefix(){.bb{background-color:#00ff00;}}/* 仅firefox 识别 */
  10. * +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */
  11.  
  12. /*一个用于展示的class为bb的div标签*/
  13. < div class ="bb"></ div >

Hack应用情境（三）

适用范围：IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)之间的兼容

实例说明：
我们现在将再次对我们的CSS进行加强了，使其能识别Safari(Chrome)游览器。这是基于它们的内核webkit来识别的，用法为@media screen and (-webkit-min-device-pixel-ratio:0)

实例代码：

  1. .bb{
  2. height:32px;
  3. background-color:#f1ee18;/*所有识别*/
  4. background-color:#00deff\9; /*IE6、7、8识别*/
  5. +background-color:#a200ff;/*IE6、7识别*/
  6. _background-color:#1e0bd1;/*IE6识别*/
  7. }
  8. @media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
  9. .bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */
  10. @-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/
  11. * +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */
  12.  
  13. /*一个用于展示的class为bb的div标签*/
  14. < div class ="bb"></ div >

Hack应用情境（四）

适用范围：IE:6.0+，FireFox:2.0+，Opera 10.0+，Sarari 3.0+，Chrome全兼容

实例说明：
实例的具体代码在下面实例代码中已经列出，具体效果如此页面的顶端部分效果，您可以通过不同游览器检测该效果。这次我们基本把所有的主流游览器都兼容了，大家来看下代码。Opera的识别有一部分归功于“\0”标记，这个标记只被IE8和Opera识别，特殊的标记往往造就的是我们更广泛的hack手段。下例的代码比较完整，大家可以选择参考。

实例代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
  3. <head>
  4. <meta http-equiv=Content-Type content="text/html; charset=gb2312"/>
  5. <style type="text/css">
  6.  
  7. /***************************************** 各游览器兼容CSS **********************************************/
  8. .bb{height:32px;background-color:#f1ee18;/*所有识别*/ background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1/*IE6识别*/}
  9.  
  10. @media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /* Safari(Chrome) 有效 */
  11. @media all and (min-width: 0px){ .bb{background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/ background-color:#4cac70\0;}/* 仅 Opera 有效 */ }{}
  12.  
  13. .bb, x:-moz-any-link, x:default{background-color:#4eff00;/*IE7、Firefox3.5及以下 识别 */}
  14. @-moz-document url-prefix(){.bb{background-color:#4eff00;/*仅 Firefox 识别 */}}
  15. * +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */
  16.  
  17. /* 一般情况下 我们区分IE7 只用 +background-color 配合 _background-color 就行了 如果必须写 .bb, x:-moz-any-link, x:default 这样的代码区分 Firefox3.5及以下 则谨记此写法对IE7也有效，故在其中要再重写一次 +background-color 或者使用 * +html .bb{background-color:blue;} 方法仅对 IE7 有效。可使用 @-moz-document url-prefix(){} 方法独立区分所有 firefox */
  18.  
  19. .browsers td{width:8%;text-align:center;padding:8px;}}
  20. .browsercolor{color:#333;font-size:18px;font-weight:bold;}
  21. .ie6{background-color:#1e0bd1}
  22. .ie7{background-color:#a200ff}
  23. .ie8{background-color:#00deff}
  24. .firefox{background-color:#4eff00}
  25. .opera{background-color:#4cac70}
  26. .other{background-color:#f1ee18;}
  27.  
  28. #tipTable td,#tipTable th{border:1px solid black;width:56px;height:16px;text-align:center;}
  29. #wordTable td{margin-left:8px;}
  30. #firefoxTip{display:none;}
  31. #firefoxTip, x:-moz-any-link, x:default{display:block;/*IE7 firefox3.5及以下 识别 */+display:none/*再区分一次IE7*/}
  32. @-moz-document url-prefix(){#firefoxTip{display:block;/*仅 firefox 识别 */}}
  33. #ChromeTip{display:none;}
  34. @media screen and (-webkit-min-device-pixel-ratio:0){#ChromeTip{display:block;}}{} /* safari(Chrome) 有效 */
  35. @media all and (min-width: 0px){#ChromeTip{display:none\0;} /* 仅 Opera 有效 */ }{}
  36. </style>
  37. </head>
  38. <body>
  39. <table class="browsers" width="100%" cellspacing="0" cellpadding="0">
  40. <tr>
  41. <td>IE6</td>
  42. <td></td>
  43. <td>IE7</td>
  44. <td></td>
  45. <td>IE8</td>
  46. <td></td>
  47. <td>Firefox</td>
  48. <td></td>
  49. <td>Opera</td>
  50. <td></td>
  51. <td>Safari(Chrome)</td>
  52. <td></td>
  53. </tr>
  54. <tr class="browsercolor">
  55. <td class="ie6">IE6</td>
  56. <td></td>
  57. <td class="ie7">IE7</td>
  58. <td></td>
  59. <td class="ie8">IE8</td>
  60. <td></td>
  61. <td class="firefox">Firefox</td>
  62. <td></td>
  63. <td class="opera">Opera</td>
  64. <td></td>
  65. <td class="other">Safari(Chrome)</td>
  66. <td></td>
  67. </tr>
  68. </table>
  69. <div class="bb">
  70. <span style="display:none;display:block\0;display:none\9;">Opera的辨别色是深绿色，Opera游览器很时髦么。</span >
  71. <span id="firefoxTip">Firefox的辨别色是浅绿色，Firefox是很强大的游览器。</span >
  72. <span id="ChromeTip">Safari和Chrome的辨别色是金黄色，Safari和Chrome使用的都是Webkit内核</span >
  73.  
  74. <!--[if IE 8]>IE8的辨别色是蓝色，新版IE8的功能可是不少呢。<![endif]-->
  75.  
  76. <!--[if IE 7]>IE7的辨别色是紫色，IE7还可以凑合着用！<![endif]-->
  77.  
  78. <!--[if IE 6]>IE6的辨别色是红色，不过，IE6可是有点落后了！<![endif]-->
  79. </div>
  80. </body>
  81. </html>

最详细的浏览器css hack的更多相关文章

  1. 各大浏览器CSS Hack收集

    各大浏览器CSS Hack收集  >>>>>>>>>>>>>>>>>>>>> ...

  2. 浏览器 CSS Hack 收集

    所谓的Hack就是只有特定浏览器才能识别这段hack代码.Hack 不是什么好东西,除非没有办法,我们尽量还是不要用着玩意. 下面是各个浏览器的CSS Hack 列表. Firefox 浏览器 @-m ...

  3. 浏览器css hack

    (1)*:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6不能识别 !important外,  FF+IE8+IE7都能识别!import ...

  4. 区分IE9/IE8/IE7/IE6及其他浏览器-CSS hack

    记录一下这些浏览器的hack如下: 一.IE9以及以下版本浏览器 对于IE8及其以下版本的浏览器,就是使用本文标题所提到的”\9″ hack.如下代码: .ie8_9{ color:blue; /*所 ...

  5. 各种浏览器css hack

    转载 http://www.cnblogs.com/jikey/archive/2010/06/21/1761924.html IE都能识别*,标准浏览器(如FF)不能识别*:IE6能识别*,但不能识 ...

  6. 常见浏览器CSS hack方法总结

    ie6和ie7 #tip {*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/} IE8和IE9 :root .test ...

  7. CSS 针对谷歌浏览器(Chrome) safari的webkit核心浏览器CSS hack

    @media screen and (-webkit-min-device-pixel-ratio:0) { ul#navUL ul a{padding:8px 2px;word-break:keep ...

  8. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  9. IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    浏览器兼容问题一直是前段开发工程师比较头痛的问题,熟悉了里面的规则也就变得简单了,这里有一份资料可以分享给大家,大家平时开发过程中遵循这个规律的话,会变得轻松多了: 各浏览器CSS hack兼容表: ...

随机推荐

  1. virtualbox修改主机名

    virtualbox修改主机名 /etc/hostname /etc/hosts

  2. 获取OrangePI板子CPU温度

    cat /sys/class/thermal/thermal_zone0/temp 读取这个文件可返回CPU温度,我看网上的说法说是要除以1000才是温度,但我这返回的数字是41...

  3. Extjs2.0 desktop 动态创建桌面图标和开始菜单

    这几天一直纠结Extjs desktop怎么动态读取数据,用Ext.net已经实现但是不灵活.Ext.net做出来的桌面在窗口关闭后只是隐藏该窗口,并没有释放,对于我这种js菜鸟来说,改那一坨代码要人 ...

  4. String类的一些转换功能（6）

    1:把字符串转换成字节数组 getBytes() 如: String s = "你好啊!" //编码 byte [] arr = s.getBytes();//这里默认编码格式是g ...

  5. Java数据库 高级查询

    插入数据记录 1.插入单行数据 语法: INSERT INTO 表名 [(字段名列表)]  VALUES (值列表); 2.插入多行数据 语法:INSERT INTO 新表 (字段名列表) VALUE ...

  6. jsonp其实很简单【ajax跨域请求】

    js便签笔记(13)——jsonp其实很简单[ajax跨域请求] 前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资 ...

  7. mybatis运行时错误Illegal argument exception argument type mismatch

    使用注解时遇到该错误 使用XML应该也会有相应的错误 解决办法:查看是不是Dao接口的参数列表没有加@Param注解  参数过多时需要该注解指明参数

  8. 【codevs1001】[bzoj1050]舒适的路线

    给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<30000).给你两个顶点S和T,求 一条路径,使得路径上最大边和最小边的比值最小. ...

  9. Day4 闭包、装饰器decorator、迭代器与生成器、面向过程编程、三元表达式、列表解析与生成器表达式、序列化与反序列化

    一.装饰器 一.装饰器的知识储备 1.可变长参数  :*args和**kwargs def index(name,age): print(name,age) def wrapper(*args,**k ...

  10. 上传文件没有写权限Access to the path is denied

    Access to the path is denied. asp.net程序目录放在系统盘,ntfs格式. 程序中对cfg.xml有写入操作. 运行的时候出现了这个问题. 在我自己的机器上没有问题 ...