~~~ 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");