hack技术

概念

由于存在着各种浏览器，同种浏览器也有不同的版本，而且不同浏览器和同种浏览器不同版本之间对 web 标准实现成不不一致，CSS 的解释机制并不完全相同，从而导致不同浏览器之间，页面的显示效果各不相同。为了解决这个问题，针对一种或多种浏览器进行 CSS 样式设置，从而达到浏览器页面效果一致的 CSS 程序叫做 hack。

hack 有三种常见的形式：CSS 属性 hack，CSS 选择符 hack，IE 条件注释 hack。

hack 主要针对 IE 浏览器。

CSS属性hack

符号	代码示例	针对浏览器
下划线（_）	_color: red;	IE6
星号（*）	*color: red;	IE6、IE7
加号（+）	+color: red;	IE6、IE7
左中括号（[）	[color: red;	IE6、IE7
星号加号（*+）	*+color: red;	IE6、IE7
\9	color: red\9;	IE6~IE10
\0	color: red\0	IE8~IE11

css选择器hack

html #demo { color:red;} / 仅IE6 识别 */

+html #demo { color:red;} / 仅IE7 识别 */

body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */

head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */

:root #demo { color:red\9; } : /* 仅IE9识别 */

IE条件注释hack

IE条件注释是在HTML文档中的，其写法与HTML注释相同。IE条件注释只有IE浏览器能够识别，而其他浏览器将其视作一般的注释忽略掉。条件注释能够用于IE5以上的IE浏览器版本。

上面代码中的“IE版本”可以是一个具体的IE版本，也可以是符合某种条件的IE版本。条件的设置是以与IE的某版本进行比较设定的。其比较的方式如下：

gt: greater than，选择条件以上版本，不包含条件版本。

lt: less than，选择条件以下版本，不包含条件版本。

gte: greater than or equal，选择条件以上版本，包含条件版本。

lte: less than or equal，选择条件以下版本，包含条件版本。

!: 选择条件以外的版本，无论高低

示例：

注意：IE 10 和 IE 11在默认情况下是不支持条件注释的，但可以通过设置页面属性可以支持条件注释，这里不进行解释。

IE6对!important的支持

在IE6中，!important有一个bug，在选择器中设置了!important，同时又在同一个选择器中!important下面再设置同一个属性，则!important不生效。

div{
     color: red !important;
     color: blue;
}

在非IE 6浏览器中，字体颜色为红色，而在IE 6中，字体颜色为蓝色。

解决这种兼容性的办法是，将带有！important的属性单独设置在一个选择器中。

div{
     color: red !important;
 }
div{
    color: blue;
}

这样，在所有浏览器中，字体都是红色。

总结

由于hack技术主要是解决低版本的IE浏览器与现代浏览器之间的兼容性问题，且不符合w3c规范。如果开发的网站只是提供给现代浏览器用户，无需兼容低版本浏览器时，无需使用hack技术。如果一定要使用hack技术，那么应该在使用hack的位置做出明显的标记，以方便维护。