css hack总结

添加标识浏览器的类名

做法是,用js来识别浏览器,然后在文档根节点添加类名。css类似这样写

.ie .sth{} /* 对IE做些处理 */
.firefox .sth{} /* 对火狐做些处理 */
.weblit .sth{} /* 对webkit做些处理 */

实现见https://github.com/rafaelp/css_browser_selector

条件注释

条件注释的内容只会在符合条件的浏览器中显示。条件注释只在IE5到IE9(包含)中工作。所以,如果要专门为ie加样式或脚本,可以用条件注释。

常见的条件注释如下

<!--[ifIE6]>
IE6版本有效
<![endif]-->
<!--[if gt IE6]>
IE6以上版本有效
<![endif]-->
<!--[if gte IE6]>
IE6(包含)及以上版本有效
<![endif]-->
<!--[if lt IE8]>
IE8以下版本有效
<![endif]-->
<!--[if lte IE8]>
IE8(包含)及以下版本有效
<![endif]-->
<!--[if !IE]>-->
除了IE
<![endif]-->

选择器hack

针对某个选择器做hack。

/*IE6-*/
*html#idname{color:red;}

/*IE7*/
*:first-child+html#dos{color:red}

/*IE7,FF,Saf,Opera*/
html>body#tres{color:red}

/*IE8,FF,Saf,Opera*/
html>/**/body#cuatro{color:red}

/*除了IE6-8*/
:root*>#quince{color:red}

/*IE10+*/
@mediascreenand(-ms-high-contrast:active),(-ms-high-contrast:none){
#veintiun{color:red;}
}

属性hack

针对某个选择器做hack。

_color:red;/*IE6支持*/
*color:red;/*IE6、IE7支持*/
+color:red;/*IE7支持*/
*+color:red;/*IE7支持*/
color:red\9;/*IE6、IE7、IE8、IE9支持*/
color:red\0;/*IE8、IE9支持*/
color:red\9\0;/*IE9支持*/
@mediascreenand(min-width:0\0){/*IE9,IE10支持*/
#veintidos{color:red}
}


---------------------------------------------------
body {
              background-color:Black;/*火狐+Google*/
              background-color:red\9\0;/*IE9*/
              background-color:blue\0;/*IE8*/
              *background-color:red;/*IE7,IE6*/
              +background-color:navy;/*IE7*/
              _background-color:green;/*IE6*/
}
注意点: IE9  支持  \9\0, 中间不要有空格,写成  background-color:red  \9\0;不会识别。必须 background-color:red\9\0;
         IE8  支持  \0,同样中间不要有空格。
         IE6,IE7 都支持  * ,
         IE6特别支持 下划线_: _background-color:green;
         IE7特别支持加号+: +background-color:green;  


定义顺序:  火狐Google>IE9>IE8>IE7>IE6;

---------------------------------------------------
 

参考

https://github.com/logeshpaul/CSS-Hacks

You may also like...