CSS:hack

1.什么是CSS hack

由于不同厂商的浏览器或某浏览器不同版本，对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同版本的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack

2.CSS hack的原理

由于不同浏览器的浏览器版本对CSS的支持以及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同浏览器情景来应用不同的CSS。

3.CSS hack分类

CSS hack大致分为三种表示形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）hack，实际项目中CSS hack大部分是针对IE浏览器版本不同之间的表现差异而引入的。

属性前缀法（即类内部hack）：例如IE6只能识别下划线“_”和星号”“，IE7能识别星号“”，但不能识别下划线，IE6~IE10都是别“\9”，但是Firefox签署三个都不认识。

选择器前缀法（即选择器hack）：例如IE6能识别html.class{},IE7能识别+HTML .class{}或者*:first-child+html .class{}。

IE条件注释法（即HTML条件注释hack）：针对IE（注：IE10+已经不再支持条件注释）：，针对IE6及以下版本：。这样hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

CSS hack书写顺序，一般试讲使用范围广，被识别能力强的CSS定义在前面。

CSS hack方式一：条件注释法

这种方式是IE浏览器转悠的Hack方式，微软官方推荐使用的hack方式。举例如下：

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

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

只要在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只有在IE6以上（包括）版本IE浏览器显示
<![endif]-->

只要在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->

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

CSS hack方式二：类内属性前缀法

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

IE浏览器个版本CSS hack对照表。



说明：在标准模式中

“_”减号是IE6专有的hack

“\9”IE6/IE7/IE8/IE9/IE10都生效

“\0”IE8/IE9/IE10都生效

“\9\0”只对IE9/IE10生效

demo1

.hack {
/*注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/
background-color: red;/*All browsers*/
background-color: blue !important;/*All browsers but IE6*/
*background-color: black;/*IE6，IE7*/
+background-color: yellow;/*IE6，IE7*/
background-color: gray\9;/*IE6，IE7，IE8，IE9，IE10*/
background-color: purple\0;/*IE8，IE9，IE10*/
background-color: orange\9\0;/*IE9，IE10*/
_background-color: green;/*IE6/
*+background-color: pink;/*IE7，在IE6下测试也是有效的*/
}

demo2

/*
IE6显示为：红色，
IE7显示为：蓝色，
IE8显示为：绿色，
IE9显示为：粉色，
Firefox/chrome显示为：橘色
*/
.element {
background-color: orange;/*所有浏览器*/
}
.element {
*background-color: blue;/*IE6、IE7*/
}
.element {
_background-color:red;/*IE6*/
}
.element {
background-color: green\0;/*IE8，IE9，IE10*/
}
:root .element {
background-color: pink\0;/*IE8，IE9，IE10*/
}

demo3

/*

该实例是用于区分标准模式下ie6~ie10和Opera/Firefox/Chrome的hack，本例特别要注意顺序
IE6显示为：橘色，
IE7显示为：粉色，
IE8显示为：黄色，
IE9显示为：紫色，
IE10显示为：绿色，
Firefox显示为：蓝色，
Opera显示为：黑色，
Safari/Chrome显示为：灰色，
.hacktest {
background-color: blue;/*都是别，此处针对Firefox*/
background-color: red\9;/*all ie*/
background-color: yellow\0;/*for IE8/IE9/10最新版的opera也识别*/
*background-color: pink;    /* IE6、IE7 */
_background-color: orange;  /* IE6 */
}
*/

CSS hack方式三：选择器前缀法

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

举例子：

html 前缀只对IE6有效

+html +前缀只对IE7有效。

CSS hack利弊

一般情况下，我们尽量避免使用CSS hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才是用hack。比如由于IE8及以下版本不支持CSS3，而我们的项目页面大量使用了CSS3新属性，在IE9/chrome/Firefox下正常渲染，这就需要IE8-的专属hack出马了，使用hack虽然对页面表现的一致性有好处，但是过多的滥用会造成HTML文档混乱不堪，增加管理和维护的负担。