CSS hack样式兼容模式收藏

part1 —— 浏览器测试仪器，测试您现在使用的浏览器类型

IE6   IE7   IE8   Firefox   Opera   Safari (Chrome)  

IE6 		 
IE7 		 
IE8 		 
Firefox 		 
Opera 		 
Safari (Chrome) 		 

您现在使用的浏览器是Opera。Opera游览器很时髦么。 您现在使用的浏览器是Firefox。Firefox是很强大的游览器。 您现在使用的浏览器是Safari(Chrome)。Safari和Chrome使用的都是Webkit内核。

part2 —— CSS hack技巧大全

兼容范围：

IE:6.0+，FireFox:2.0+，Opera 10.0+，Sarari 3.0+，Chrome

参考资料：

各游览器常用兼容标记一览表:

标记 IE6 IE7 IE8 FF Opera Sarari
[*+><] √ √ X X X X
_ √ X X X X X
\9 √ √ √ X X X
\0 X X √ X √ X
@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}} X X X X X √
.bb , x:-moz-any-link, x:default X √ X √(ff3.5及以下) X X
@-moz-document url-prefix(){.bb{}} X X X √ X X
@media all and (min-width: 0px){.bb {}} X X X √ √ √
* +html .bb {} X √ X X X X
游览器内核 Trident Trident Trident Gecko Presto WebKit

（以上 .bb 可更换为其它样式名）

注意点：

网上很多资料中常常把!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已经独立识别。

实例代码：

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

/*一个用于展示的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(){}

实例代码：

.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手段。下例的代码比较完整，大家可以选择参考。

实例代码：

  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
  4 <head>
  5
  6 <meta http-equiv=Content-Type content="text/html; charset=gb2312"/>
  7
  8 <style type="text/css">
  9
 10
 11 /***************************************** 各游览器兼容CSS **********************************************/ .bb{height:32px;background-color:#f1ee18;/*所有识别*/ background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1/*IE6识别*/}
 12  @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 有效 */ }{}
 13  .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 识别 */
 14 /* 一般情况下 我们区分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 */
 15 .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;}
 16 #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 有效 */ }{}
 17
 18
 19 </style>
 20
 21 </head>
 22
 23 <body>
 24
 25 <table class="browsers" width="100%" cellspacing="0" cellpadding="0">
 26
 27 <tr>
 28
 29 <td>IE6</td>
 30
 31 <td></td>
 32
 33 <td>IE7</td>
 34
 35 <td></td>
 36
 37 <td>IE8</td>
 38
 39 <td></td>
 40
 41 <td>Firefox</td>
 42
 43 <td></td>
 44
 45 <td>Opera</td>
 46
 47 <td></td>
 48
 49 <td>Safari(Chrome)</td>
 50
 51 <td></td>
 52
 53 </tr>
 54
 55 <tr class="browsercolor">
 56
 57 <td class="ie6">IE6</td>
 58
 59 <td></td>
 60
 61 <td class="ie7">IE7</td>
 62
 63 <td></td>
 64
 65 <td class="ie8">IE8</td>
 66
 67 <td></td>
 68
 69 <td class="firefox">Firefox</td>
 70
 71 <td></td>
 72
 73 <td class="opera">Opera</td>
 74
 75 <td></td>
 76
 77 <td class="other">Safari(Chrome)</td>
 78
 79 <td></td>
 80
 81 </tr>
 82
 83 </table>
 84
 85 <div class="bb">
 86
 87 <span style="display:none;display:block\0;display:none\9;">Opera的辨别色是深绿色，Opera游览器很时髦么。</span >
 88
 89 <span id="firefoxTip">Firefox的辨别色是浅绿色，Firefox是很强大的游览器。</span >
 90
 91 <span id="ChromeTip">Safari和Chrome的辨别色是金黄色，Safari和Chrome使用的都是Webkit内核</span >
 92
 93
 94 <!--[if IE 8]>IE8的辨别色是蓝色，新版IE8的功能可是不少呢。<![endif]-->
 95
 96
 97
 98 <!--[if IE 7]>IE7的辨别色是紫色，IE7还可以凑合着用！<![endif]-->
 99
100
101
102 <!--[if IE 6]>IE6的辨别色是红色，不过，IE6可是有点落后了！<![endif]-->
103
104
105 </div>
106
107 </body>
108
109 </html>

时间： 2024-12-12 21:26:38

CSS hack样式兼容模式收藏的相关文章

css hack IE兼容调试小结(Webstorm、VS2010)，有图有真相，研究了一中午

练习了些CSS代码,发现IE各种不兼容,打算用css hack调试IE 6 7 8.网上搜了些方法,虽然可行,但webstorm和VS2010各种提示报错让人不爽,试了几个小时,最终结论如下: 1.只有IE6 7认那些乱七八槽的符号,可随便用一个(% ^ &之类都行),但大家习惯用*或+,如*.background,这样只有IE6 7才认.但是webstorm会把语法检查把上下行一起标错,看起来不爽,VS干脆就报错不让ctrl E D格式化. 2.!important虽然可用,但要注意顺序,且这

CSS Hack是什么意思

CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果. 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果. 这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack. >>>> CSS Hack的原理是什么

各种css hack - 兼容性探测

CSS HACK:浏览器兼容的一些写法人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说到浏览器兼容,CSS HACK自然而然地被我们想起.今天,我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事,需要我们有统一的规范来进行Coding,以方便维护.而解决兼容的方法就是(必须是,因为这才最容易有问题的)其中一个最重要的.要解决的规范之一. 在解决兼容方法上,想定出一个统一的规范,个人认为应

常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解

什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 总结一下我编写代码的时候遇到的浏览器兼容问题,跟大家学习. 一.解决无法在IE6下面设置1px高的容器(div)的问题. 大家看看这一段代码: <div style="height:1px;wi

让IE和Firefox兼容的CSS技巧集合css hack

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

浅谈CSS hack（浏览器兼容）

今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu.com/data/browser).令我感到欣慰的是chrome排第一,chrome一直以来对W3C标准都支持得比较友好,但是图中也反映了使用IE系列的人数也不少,所以我们日常做前端开发的时候还要考虑他们的感受. 以下是正文: 我的前任公司做前端的时候,要求兼容IE8及以上,谷歌,火狐三座大山.因为

兼容IE6/IE7/IE8/FireFox的css hack

.color{ background-color: #CC00FF; background-color: #FF00009; *background-color: #0066FF; _background-color: #009933; } **记住上面得样式解释为顺序是 ff.ie8.ie7.ie6 ** 显示的结果: 用火狐浏览,颜色是紫色 用 IE8 浏览,颜色是红色 用 IE7 浏览,颜色是蓝色 用 IE6 浏览,颜色是绿色 IE8 最新css hack: "" 例:"

CSS Hack (各个浏览器兼容的问题)

写css样式的时候,恐怕最头疼的就是各个浏览器下的兼容性问题,即css hack,明明感觉应该是对的,但是就是出不来效果,我根据平时所接触的,总结一下关于兼容 性的技巧,希望可以对大家有所帮助…… CSS Hack的原理是什么 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针