css hack-浏览器兼容
本篇博客转自[css hack(大眼萌)](https://blog.csdn.net/qq_31635733/article/details/81660897)
参考链接：http://shouce.jb51.net/csshack/
CSS hack简介
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。
百度百科对css hack的定义为：
CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一
厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不
到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览
器，能在不同的浏览器中也能得到我们想要的页面效果。简单的说，CSS hack的目的就是使你的CSS代码兼容不同
的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。1、margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍，也就是说margin-left:20px;在ie6中距左侧对象的实际显示距离是40px，而在非ie6中显示的距左侧对象的距离是设置的值20px;所以要想设置一个对象距离左侧对象的距离在所有浏览器中都显示是20px的宽度的样式应为：.kwstu{margin-left:20px;_margin-left:20px;}
2、kwstu{background:green;/*forfirefox*/width:300px;_width:200px;}，一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别，所以此样式在IE6中实际设置对象的宽度为200px，后面的把前面的给覆盖了，而其他浏览器不识别_width不会执行_width:200px;这句样式，所以在其他浏览器中设置对象的宽度就是300px。
3、比如要分辨IE6和firefox两种浏览器，可以这样写：
div { background:green;/*forfirefox*/ *background:red;/*forIE6*/(bothIE6&&IE7) }
我在IE6中看到是红色的，在firefox中看到是绿色的。
注意： 我们通常主要考虑的浏览器有IE6、IE7、IE8、谷歌浏览器（chrome）、火狐（Mozilla Firefox）即可，至于我们常用的傲游、QQ的TT浏览器是用你计算机中装的系统自带浏览器的内核，所以只需要兼容以上浏览器即可兼容TT傲游浏览器。
CSS Hack常见的有三种形式：
CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。
1、属性级Hack：比如IE6能识别下划线“_”和星号“*”，IE7能识别星号“*”，但不能识别下划线”_ ”，而firefox两个都不能认识。
2、选择符级Hack：比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
3、IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<!-[if IE]><!-您的代码-><![endif]>，针对IE6及以下版本：<!-[if it IE 7]><!-您的代码-><![endif]->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。
CSS hack的实际应用
_ IE6
* IE6/7
!important IE7/Firefox
*+ IE7
\9 IE6/7/8
\0 IE8
条件hack<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]--> IE7以下版本<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]--> IE7<!--[if IE 8]> <html class="no-js lt-ie9"><![endif]--> IE8<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> IE8以上上面的css在firefox中，它是认识不了后面的那个带星号的东西是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green} ,于是理所当然这个div的背景是绿色的。在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;*background:red;} ,于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。CSS hack:区分IE6，IE7，firefox区别不同浏览器，CSS hack写法
区别IE6与FF：
background:orange;*background:blue;区别IE6与IE7：
background:green!important;background:blue;区别IE7与FF：
background:orange;*background:green;区别FF，IE7，IE6：
background:orange;*background:green;_background:blue;background:orange;*background:green!important;*background:blue;注：IE都能识别*;标准浏览器(如FF)不能识别*；IE6能识别*；不能识别 !important ;IE7能识别*，能识别!important;FF不能识别*，但能识别!important;
浏览器优先级别:
FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6
以: " #demo {width:100px;} "为例:
#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/
* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
*+html #demo {width:130px;} /*会被IE7执行*/
所以最后,#demo的宽度在三个浏览器的解释为: FIREFOX:100px; ie6:120px; ie7:130px;
IE8 最新css hack：
"9" 例:"border:1px 9;".这里的"9"可以区别所有IE和FireFox.（只针对IE9 Hack）
"0" IE8识别，IE6、IE7不能.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.
IE6 hack
_background-color:#CDCDCD;/*ie6*/IE7 hack
*background-color:#dddd00; /* ie 7*/IE8 hack
background-color:red 0; /* ie 8/9*/IE9 hack
background-color:blue 90;火狐，傲游，浏览器通用
background-color:red!important;
注意写hack的顺序，其中：
background-color:red0;IE8和IE9都支持；
background-color:blue90; 仅IE9支持；
另外，background-color:eeeeee9;的HACK支持IE6-IE8，但是IE8不能识别“*”和“_”的CSS HACK。
可综合上述规律灵活应用。
IE9 和 IE8 以及其他版本的区别说
background-color:blue; 各个浏览器都认识，这里给firefox用；background-color:red9;9所有的ie浏览器可识别；background-color:yellow0; 0 是留给ie8的，最新版opera也认识，后面自有hack写了给opera认的，所以，0我们就认为是给ie8留的；+background-color:pink; + ie7定了；_background-color:orange; _专门留给神奇的ie6；:root #test { background-color:purple9; } :root是给ie9的，网上流传了个版本是 :root #test { background- color:purple0;}，这个，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性9;}@media all and (min-width:0px){ #test {background-color:black0;} } 这个是老是跟ie抢着认0的神奇的opera，必须加个0,不然firefox，chrome，safari也都认识。。。@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。选择符级HackCSS内部选择符级Hack语法
<hack> selector{ sRules }说明选择不同的浏览器及版本尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为标准模式。一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。简单列举几个：
* html .test{color:#090;} /* For IE6 and earlier */* + html .test{color:#ff0;} /* For IE7 */.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */内部属性HackCSS内部属性级Hack语法：
selector{<hack>?property:value<hack>?;}取值：
注意： 不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。补充：IE6能识别* ，但不能识别 !important,IE7能识别 *，也能识别!important;FF不能识别 *，但能识别!important;下划线” _ “,IE6支持下划线，IE7和firefox均不支持下划线。
为什么不推荐使用CSS hack来解决兼容性问题
CSS hack是因为现有浏览器对标准的解析不同，为了兼容各浏览器，所采用的一种补救方法。CSS hack是一种类似作弊的手段，以欺骗浏览器的方式达到兼容的目的，是用浏览器的兼容性差异来解决浏览器的兼容性问题。因此，在设计之初，写CSS hack需要遵循以下三条原则：
- 有效： 能够通过 Web 标准的验证
- 只针对太古老的/不再开发的/已被抛弃的浏览器， 而不是目前的主流浏览器
- 代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。现在很多hacks已经抛弃了最初的原则，而滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此，并不推荐使用CSS hack来解决兼容性问题。
常用的CSS Hack
代码如下:
color:red;_color:red;*color:red;+color:red;*+color:red;[color:red;color:red\9;color:red\0;color:red\9\0;color:red!important;*html #demo{color:red;}
* +html #demo {color:red;}
body:nth-of-type(1) #demo{color:red;}
head:first-child+body #demo{color:red;}
:root #demo{color:red\9;}Hack应用情境
兼容范围：
IE:6.0+，FireFox:2.0+，Opera 10.0+，Sarari 3.0+，Chrome
各浏览器常用兼容标记一览表:
| 标记 | IE6 | IE7 | IE8 | FF | Opera | Safari |
|---|---|---|---|---|---|---|
| [*+><] | √ | √ | 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 可更换为其它样式名）
实例讲解：
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识别*/
}/*一个用于展示的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手段。下例的代码比较完整，大家可以选择参考。
实例代码：
<!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-浏览器兼容相关推荐
- CSS hack浏览器兼容一览表
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助. 屏蔽IE浏览 ...
- hack (浏览器兼容css hack）
1.hack的原理 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内 ...
- 关于CSS样式浏览器兼容问题的一些注意事项
CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不 ...
- 关于CSS中浏览器兼容的问题总结二
CSS对浏览器的兼容性有时让人感觉比较麻烦,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xht ...
- html css常见浏览器兼容问题总结
1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码: 1 margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height), ...
- CSS 多浏览器兼容又一方案
什么是浏览器HACK:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写CSS的时候会很恼 ...
- div+css 布局浏览器兼容
第一次写div + css 的站点,进度相当的慢,而且项目也赶得挺急的,整个人被操劳的很累,做了几天后我把所学到的,一些技巧和网上搜罗 到了综合下发出来,希望对做设计的朋友有帮助! 1.为什么在不同的 ...
- 各种css hack - 兼容性探测
CSS HACK:浏览器兼容的一些写法 人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说到浏览器兼容,C ...
- HTML css和js浏览器兼容问题
什么是浏览器兼容? 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题. 为什么浏览器会存在兼容问题? 同一浏览器,版本越老,存 ...
- 对ie6、ie7、ff兼容性的详细css hack介绍
这个毛病把我憋了好久了,最近到底找到了解决滴方式,通过偶测试系完整ok滴,和大伙儿共享. 以下为引佣: 如今偶大多数全是用!important来hack,关于ie6和firefox测试可以正常卖弄,可 ...
最新文章
- 引用 提高开发水平的几项必备技术
- java中模板方法的设计模式
- 删除目录下的特定命名的图片，获取特定名称图片的路径
- effective c++ 学习
- Java伪界面操作数据库的小实例
- 用Ant实现Java项目的自动构建和部署
- 2020-11-13（调用约定）
- objective-c java_程序员转型指南 当Java遇见了Objective-C
- python第三方包的windows安装文件exe格式
- 一文读懂领域迁移与领域适应的常见方法
- kali下sqliv:SQL注入URL扫描器
- 论文浅尝 - KDD2020 | 真实世界超图的结构模式和生成模型
- Spring Boot 2.3.3 稳定版发布！修复了这18个Bug！！
- 你所不知道的@ComponentScan注解用法之包路径占位符
- MySQL下载安装与配置详细教程
- 用贪心算法求解最小生成树
- edp和edt哪个好_菲拉格慕香水edp和edt的区别 选择适合自己的香水方法
- Ubuntu 18.04.3 双屏显示 N卡驱动 问题解决
- centos6.5 MailScanner+ Spamassassin垃圾邮件过滤器+clamav 杀毒软件
- 2023南京信息工程大学计算机考研信息汇总