css hack

CSS HACK是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS HACK就是让你记住这个标准），以达到在不同的浏览器上应用不同的CSS样式的目的。

CSS HACK的三种形式

CSSHACK有三种形式，分别是CSS属性HACK、CSS选择器HACK和IE条件注释HACK， 开发中主要是针对IE浏览器做兼容性处理。

1.属性级HACK。比如IE6浏览器能识别下划线【_】和星号【*】，IE7能识别星号【*】，但不能识别下划线【_】，而Firefox浏览器对两个符号都不能认识。

2.选择器HACK。比如IE6能识别【*html】，IE7能识别【*+html】或者【*:first-child+html】。

3.IE条件注释HACK。IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。这类注释不仅对CSS生效，对写在判断语句里面的所有代码都会生效。这个条件注释只有在IE浏览器下才能执行，在非IE浏览下则会被当做注释而视而不见。因此可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

CSS HACK的应用

一些常用的HACK符号就不说了，如果不清楚的可以参考我的另外一篇博客：https://www.cnblogs.com/yanggb/p/11213435.html，这里只说一下关于浏览器优先级的问题。

设置CSS的HACK要注意CSS样式的层叠性，给同一个元素设置的兼容写法必须写在后面，否则会被层叠掉。另外还要注意浏览器的样式识别优先级，通常是Firefox<IE7<IE6，即书写顺序一般是Firefox IE7 IE6。

以.demo {width: 100px;}为例，看看实际顺序应该怎么写。

.demo { /* 被FIREFOX，IE6，IE7执行 */
    width:100px;
}
*+html .demo { /* 会被IE7执行 */
    width:130px;
}
* html .demo { /* 会被IE6执行，之前的定义会被后来的覆盖，所以IE6最后为120px */
    width:120px;
}

这里的按照浏览器识别HACK符号从低到高的优先级从上往下写CSS选择器HACK，就能达到不同的浏览器应用不同的CSS样式的效果。

不推荐使用CSS HACK来解决兼容性问题

CSS HACK的产生是因为现有浏览器对标准的解析不同，为了兼容各浏览器所采用的一种补救方法。类似一种作弊的手段，以欺骗浏览器的方式达到兼容的目的，是用浏览器的兼容性差异来解决浏览器的兼容性问题。因此，在设计之初，写CSS hack需要遵循以下三条原则：

1.有效，能够通过Web标准的验证。

2.只针对太古老的/不再开发的/已被抛弃的浏览器， 而不是目前的主流浏览器。

3.代码语法要很难看。因为难看就会让人时刻记住HACK是一种不得已才采用的做法，会想办法去掉它。

现在很多的HACKS已经抛弃了最初的原则，而滥用HACK会导致浏览器更新之后产生更多的兼容性问题。因此并不推荐使用CSS hack来解决兼容性问题。

 

"人之所以会心累，就是常常徘徊在坚持和放弃之间，举棋不定。"