对ie CSS hack总结和理解

~~~ ie的CSS hack 主要有4种 选择器hack、属性hack、 条件注释hack 和 媒体查询hack

以前觉得hack的方法很没规律，今天整理了一下，发现还是有点规律可循的。

不过因为hack的方法各个浏览器，或同一浏览器的不同版本都是各自为政的，没有标准可循，易变性很强，要是哪天浏览器不支持某些hack方式了，那么大量采用这些hack方式去布局的页面，将会面临很大的问题，因而hack的方式去解决问题容易给日后的维护带来风险，所以还是尽量少用为好。

CSS hack

IE hack 专门针对IE,只有IE能识别的

----------- 选择器hack ------------

/* ie6 and below */

1. *
example:
*html selector{}  ~~表示html标签下的某个选择器  *html只有ie6及以下版本才能识别 *p表示任意的p标签  *html表示任意的html标签 只有ie6=-能识别 （*通配符前缀支持)
2. .abc.aClassSelector ~~~ .abc前缀让原有的aClassSelector变成只有ie6及其一下版本才能识别的 类选择器
.abc.aClassSelector{} /* abc为不存在的类名 随便什么名都可以 */ ~~~给同时具有这两个类名的元素定义样式 若前一个类名不存在 则采用后一个类名，只有ie6=-能识别 (选择器单元 不存在成分忽略)

/* ie7 and below */

1. .aClassSelector,{}   ~~~原有的类选择器加上, 变成只有ie7及其以下版本才能识别的类选择器 ,表示并列选择器 若后面不存在并列项则不影响，ie7=-能识别 不会认为有语法问题 (,并列关系符不当 包容)

/* ie7 only */

1. *:first-child+html selector{}  ~~~任意元素的第一个子元素后面紧跟着html  选择器的起点 这种写法只有ie7识别 同时:first-child伪类+紧跟关系符  (+紧跟关系符支持)
2. *+html selector{}  ~~~*html 只有ie6=-能识别为html  *+html 只有ie7能识别为html 任意的元素紧跟html +紧跟关系符
3. .classSelector,x:-IE7{} ~~.aClassSelector, ie7=-能识别该类选择器  进一步指定x:-ie7后 只有ie7能识别

/* everything but ie 6 */  (ie6不支持父子层级关系符> 其他ie都支持)

1. html > body .selector{} ~~~ 任何ie都能把 html>body 识别为html body,但是ie6不能. 对于ie6以外的ie来说，h2 cite 和 h2>cite 是等价的，即选择器间的空格 和 > 都是表示父子层级关系

/* everything but ie 6/7 */  (ie67不支持选择器成分中间的注释符 ie89能忽略掉)
1. html>/**/body .selector{}  ~~~  > 父子层级关系 ie89能把层级关系符>后的注释符 /**/忽略掉
2. head~/**/body .selector{}  ~~~  ~ 同级跟随关系   ie89能把层级关系符>后的注释符 /**/忽略掉

/* everything but ie678 */ 即 ie 9=+ only
1. :root *> selector {}  ~~ 即 根节点下的 任意元素下的 某个元素 (根节点伪类:root支持 *> 任意元素子关系符支持)
2. body:last-child .selector{}  ~~~ (:last-child修饰符支持)
3. body:nth-of-type(1) .selector{}  ~~ (:nth-of-type(num)修饰符支持)
4. body:first-of-type .selector{}  ~~(:first-of-type修饰符支持)

-------------- ie属性hack -------------------
/* ie6 */  (下划线  连字符支持)
1. .selector{_color:red;}
2. .selector{-color:red;}

/* ie 67 */ (属性值后感叹号支持 跟 !important的作用类似  !后面可以是任意字符 表示着重,若刚好设为 !important则ie6-9都支持该属性值 !important对ie6而言没有提升样式权重的效果)
1. .selector{ color:red !ie or anyword;}
2. .selector{ *color:red; }  ~~~(属性名特殊符号前缀支持 这些特殊符号包括 * ! & $ = + .等等，最常见的还是*号)
   .selector{ !color:red; }
   .selector{ $color:red; }
   .selector{ &color:red; }
   
--------------- ie media query hack ---------------
/* ie67 */
1. @media screen\9 {}

/* ie8 */
1. @media \0screen {}

.....

-------------- ie 条件注释 -------------

<!-- [if ie 6]><p> i am a p tag , only ie 6 can recognize me <![end if]-->


js hack 检测ie版本

IE js hack
(checkIE=documet.createElement("b")).innerHTML='<!--[if ie 6]><i></i><![end if]-->';
var isIE6=checkIE.getElementsByTagName("i").length==1;
如此类推 可以检测ie的版本

navigator.appVersion.indexOf("MSIE 7");