Hack技术

CSS Hack来解决浏览器局部的兼容性问题,hack主要针对IE浏览器
常见的有三种形式:css属性Hack,css选择符HACK以及IE条件注释Hack,

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 lt IE 7]><!–您的代码–><![endif]–>，这类Hack不仅对CSS生效，
    对写在判断语句里面的所有代码都 会生效。

条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

![<![endif]—>
/* CSS属性级Hack /
color:red; / 所有浏览器可识别/
_color:red; / 仅IE6 识别 /
color:red; / IE6、IE7 识别 /
+color:red; / IE6、IE7 识别 /
+color:red; / IE6、IE7 识别 /
[color:red; / IE6、IE7 识别 /
color:red9; / IE6、IE7、IE8、IE9 识别 /
color:red; / IE8、IE9 识别/
color:red9; / 仅IE9识别 /
color:red ; / 仅IE9识别 /
color:red!important; / IE6 不识别!important/
-------------------------------------------------------------
/ 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:red9; } : / 仅IE9识别 /
--------------------------------------------------------------
/ IE条件注释Hack */

](https://upload-images.jianshu.io/upload_images/13336975-d9cb1a450fda9410.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Hack技术

推荐阅读更多精彩内容