• 实例讲解：

    Hack应用情境（一）

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

    • 实例说明：

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

    • 实例代码：

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

    • 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(){}

    • 实例代码：

    • .bb{
      height:32px;
      background-color:#f1ee18;/*所有识别*/
      background-color:#00deff\9; /*IE6、7、8识别*/
      +background-color:#a200ff;/*IE6、7识别*/
      _background-color:#1e0bd1;/*IE6识别*/
      }
      .bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */
      @-moz-document url-prefix(){.bb{background-color:#00ff00;}}/* 仅firefox 识别 */
      * +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */

      /*一个用于展示的class为bb的div标签*/

      <
      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)

    • 实例代码：

    • .bb{
      height:32px;
      background-color:#f1ee18;/*所有识别*/
      background-color:#00deff\9; /*IE6、7、8识别*/
      +background-color:#a200ff;/*IE6、7识别*/
      _background-color:#1e0bd1;/*IE6识别*/
      }
      @media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
      .bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */
      @-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/
      * +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */

      /*一个用于展示的class为bb的div标签*/

      <
      div
      class
      ="bb"></
      div
      >

    • Hack应用情境（四）

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

    • 实例说明：

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

    • 实例代码：

    • <!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" lang="gb2312">

    • <head>
    • <meta http-equiv=Content-Type content="text/html; charset=gb2312"/>
    • <style type="text/css">

    • /***************************************** 各游览器兼容CSS **********************************************/

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

      @media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /* Safari(Chrome) 有效 */
      @media all and (min-width: 0px){ .bb{background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/ background-color:#4cac70\0;}/* 仅 Opera 有效 */ }{}

      .bb, x:-moz-any-link, x:default{background-color:#4eff00;/*IE7、Firefox3.5及以下 识别 */}
      @-moz-document url-prefix(){.bb{background-color:#4eff00;/*仅 Firefox 识别 */}}
      * +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */

      /* 一般情况下 我们区分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
      */

      .browsers td{width:8%;text-align:center;padding:8px;}}

      .browsercolor{color:#333;font-size:18px;font-weight:bold;}

      .ie6{background-color:#1e0bd1}

      .ie7{background-color:#a200ff}

      .ie8{background-color:#00deff}

      .firefox{background-color:#4eff00}

      .opera{background-color:#4cac70}

      .other{background-color:#f1ee18;}

      #tipTable td,#tipTable th{border:1px solid black;width:56px;height:16px;text-align:center;}

      #wordTable td{margin-left:8px;}

      #firefoxTip{display:none;}

      #firefoxTip, x:-moz-any-link, x:default{display:block;/*IE7 firefox3.5及以下 识别 */+display:none/*再区分一次IE7*/}

      @-moz-document url-prefix(){#firefoxTip{display:block;/*仅 firefox 识别 */}}

      #ChromeTip{display:none;}

      @media screen and (-webkit-min-device-pixel-ratio:0){#ChromeTip{display:block;}}{} /* safari(Chrome) 有效 */

      @media all and (min-width: 0px){#ChromeTip{display:none\0;} /* 仅 Opera 有效 */ }{}

    • </style>
    • </head>
    • <body>
    • <table class="browsers" width="100%" cellspacing="0" cellpadding="0">
    • <tr>
    • <td>IE6</td>
    • <td></td>
    • <td>IE7</td>
    • <td></td>
    • <td>IE8</td>
    • <td></td>
    • <td>Firefox</td>
    • <td></td>
    • <td>Opera</td>
    • <td></td>
    • <td>Safari(Chrome)</td>
    • <td></td>
    • </tr>
    • <tr class="browsercolor">
    • <td class="ie6">IE6</td>
    • <td></td>
    • <td class="ie7">IE7</td>
    • <td></td>
    • <td class="ie8">IE8</td>
    • <td></td>
    • <td class="firefox">Firefox</td>
    • <td></td>
    • <td class="opera">Opera</td>
    • <td></td>
    • <td class="other">Safari(Chrome)</td>
    • <td></td>
    • </tr>
    • </table>
    • <div class="bb">
    • <span style="display:none;display:block\0;display:none\9;">Opera的辨别色是深绿色，Opera游览器很时髦么。</span >
    • <span id="firefoxTip">Firefox的辨别色是浅绿色，Firefox是很强大的游览器。</span >
    • <span id="ChromeTip">Safari和Chrome的辨别色是金黄色，Safari和Chrome使用的都是Webkit内核</span >

    • <!--[if IE 8]>IE8的辨别色是蓝色，新版IE8的功能可是不少呢。<![endif]-->

    • <!--[if IE 7]>IE7的辨别色是紫色，IE7还可以凑合着用！<![endif]-->

    • <!--[if IE 6]>IE6的辨别色是红色，不过，IE6可是有点落后了！<![endif]-->

    • </div>
    • </body>
    • </html>

小学了一下css hack的更多相关文章

  1. CSS Hack技术介绍及常用的Hack技巧集锦

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  2. CSS Hack

    CSS HACK,网上有很多,主要是IE版本不同造成的,尽量不要用CSS HACK,实在调不过去可以用一用,相信以后随着IE低版本的淘汰,CSS HACK也将不在使用. 类内部HACK IE6识别 - ...

  3. css3复杂选择器+内容生成+Css Hack

    1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...

  4. CSS Hack解决浏览器IE部分属性兼容性问题

    1.Css Hack 不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不 ...

  5. IE9下css hack写法

    ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下: select { background-color:red\0; ...

  6. 【荐】说说CSS Hack 和向后兼容

    人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说 到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...

  7. IE 6 ~ 9 CSS Hack 写法总结

    IE 6 ~ 9 CSS Hack 写法总结 24th 四, 14 lip2up [code lang="css"]_color: red;    /* ie6 */*color: ...

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

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

  9. 聊聊css hack

    什么是CSS hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如 ...

随机推荐

  1. 使用Spring整合javaMail发用邮件

    1.导入javamail.jar        自行百度下载 2.使用模板发送邮件架包 freemarker.jar 3.Spring配置文件  以及架包这里就不需要说了吧,如果不明白的发我Email ...

  2. C++中不同数据类型的互相转换

    1.string --> char *   char * p = (char*)str.c_str(); 2.char * -->string   char *p = "aaa& ...

  3. [转]unity3d 脚本参考-技术文档

    unity3d 脚本参考-技术文档 核心提示:一.脚本概览这是一个关于Unity内部脚本如何工作的简单概览.Unity内部的脚本,是通过附加自定义脚本对象到游戏物体组成的.在脚本对象内部不同志的函数被 ...

  4. SharePoint开发——利用CSOM逐级获取O365中SharePoint网站的List内容

    博客地址:http://blog.csdn.net/FoxDave 本文介绍如何利用SharePoint客户端对象模型(.NET)逐级获取Office 365网站中List的内容,仅仅是示例,没有 ...

  5. js（function（）｛alert（‘’‘）｝）

    function(){alert('sss')}是个匿名函数.没有名字.所以没有办法调用.在外面加个括号,就变成了一个值,值的内容是函数的引用.例如var a = (function(){" ...

  6. 2016 - 1 - 24 CSS初步

    1.The difference between CSS and HTML HTML document is that it specities the content of the page. An ...

  7. TCP 状态机

    TCP 状态机 TCP 协议的操作可以使用一个具有 11 种状态的有限状态机( Finite State Machine )来表示,图 3-12 描述了 TCP 的有限状态机,图中的圆角矩形表示状态, ...

  8. Map/Reduce 工作机制分析 --- 数据的流向分析

    前言 在MapReduce程序中,待处理的数据最开始是放在HDFS上的,这点无异议. 接下来,数据被会被送往一个个Map节点中去,这也无异议. 下面问题来了:数据在被Map节点处理完后,再何去何从呢? ...

  9. Node.js高级编程读书笔记 - 4 构建Web应用程序

    Outline 5 构建Web应用程序 5.1 构建和使用HTTP中间件 5.2 用Express.js创建Web应用程序 5.3 使用Socket.IO创建通用的实时Web应用程序 5 构建Web应 ...

  10. Linux集群及LVS简介

    一.什么是集群 通过一组松散集成的计算机软件和/或硬件连接起来高度紧密地协作完成计算工作.在某种意义上,他们可以被看作是一台计算机.集群系统中的单个计算机通常称为节点,通常通过局域网连接,但也有其它的 ...