CSS-hack | IsYang's Blog

原文百度百科

css hack简介

CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

原理

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对类内部Hack：比如 IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，而firefox两个都不能认识。等等
选择器Hack：比如 IE6能识别∗html .class{}，IE7能识别∗+html .class{}或者∗:first-child+html .class{}。等等

HTML头部引用(if IE)Hack：针对所有IE：<![endif]–>，针对IE6及以下版本：<![endif]–>，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

常用的CSS hack方式

（1）方式一条件注释法

<!--[if IE]>
    这段文字只在IE浏览器显示
<![endif]-->

<!--[if IE 6]>
    这段文字只在IE6浏览器显示
<![endif]-->

<!--[if gte IE 6]>
    这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

<!--[if ! IE 8]>
    这段文字在非IE8浏览器显示
<![endif]-->

<!--[if !IE]>
    这段文字只在非IE浏览器显示
<![endif]-->

（2）方式二类内属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

IE浏览器各版本 CSS hack 对照表

hack	写法	实例	IE6 (S)	IE6 (Q)	IE7 (S)	IE7 (Q)	IE8 (S)	IE8 (Q)	IE9 (S)	IE9 (Q)	IE10 (S)	IE10 (Q)
*	*color	青色	Y	Y	Y	Y	N	Y	N	Y	N	Y
+	+color	绿色	Y	Y	Y	Y	N	Y	N	Y	N	Y
-	-color	黄色	Y	Y	N	N	N	N	N	N	N	N
_	_color	蓝色	Y	Y	N	Y	N	Y	N	Y	N	N
#	#color	紫色	Y	Y	Y	Y	N	Y	N	Y	N	Y
\0	color:red\0	红色	N	N	N	N	Y	N	Y	N	Y	N
\9\0	color:red\9\0	粉色	N	N	N	N	N	N	Y	N	Y	N
!important	color:blue !important;color:green;	棕色	N	N	Y	N	Y	N	Y	N	Y	Y

说明：在标准模式中

“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

（3）方式三选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

几种常见的选择器前缀法

∗html –> ∗前缀只对IE6生效
∗+html –> ∗+前缀只对IE7生效
@media screen\9{…} –> IE6/7生效
@media \0screen {body { background: red; }} –> IE8有效
@media \0screen\,screen\9{body { background: blue; }} –> IE6/7/8有效
@media screen\0 {body { background: green; }} –> IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} –> E9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} –> IE10有效

实际应用

浏览器优先级别: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;

CSS内部属性级Hack

语法：selector{<hack>?property:value<hack>?;}
取值：

“下划线” ：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线更为合适。

“星号”：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（星号）的认知度更高。

\9：选择IE6+。

\0：选择IE8+和Opera。

[;property:value;]; 选择webkit核心浏览器（Chrome,Safari）。IE7及以下也能识别。
中括号内外的3个分号必须保留，第一个分号前可以是任意规则或任意多个规则。
[;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。
生效的始终是中括号内的最后一条规则，所以通常选用第一种写法最为简洁。

注：

IE都能识别*，标准浏览器(如FF)不能识别∗；

IE6能识别*，不能识别 !important;

IE7能识别*，能识别!important;

FF不能识别*，但能识别!important;

“\9”　例:”border:1px \9;”.这里的”\9”可以区别所有IE和FireFox.（只针对IE9 Hack）;

“\0”　IE8识别，IE6、IE7不能;

“_”　IE6可以识别下划线,IE7、IE8、FireFox不能;

尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎。
注意了：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
补充：IE6能识别 ，但不能识别 !important,IE7能识别 ，也能识别!important;FF不能识别 *，但能识别!important;下划线”_“IE6支持下划线，IE7和firefox均不支持下划线。

css hack简介

原理

常用的CSS hack方式

（1）方式一 条件注释法

（2）方式二 类内属性前缀法

（3）方式三 选择器前缀法

实际应用

（1）方式一条件注释法

（2）方式二类内属性前缀法

（3）方式三选择器前缀法