css经常使用hack

原文地址：css经常使用hack

忽然想起今天早上在CNZZ看到的统计数据，使用IE六、7的用户比例还真多，看到以后个人心都碎了。微软都放弃了为毛还有这么多人不死心？

因此说，IE下的兼容仍是得作的。 –，–

css hack分为3种，即属性hack，IE条件注释hack，CSS选择器Hack

一、属性hack

对于这个我只想说网上各类答案都有，只知道复制粘贴，好多错误，测试一下不就知道了。

.myClass{
background-color:#f1ee18;/*全部识别*/
background-color:#00deff\9;/*IE六、七、八、九、10识别，可是IE11不支持，亲测*/
background-color:#00deff\0;/*IE八、九、十、11识别,听说还有opera*/
background-color:#00deff\9\0;/*IE八、九、10识别*/
+background-color:#a200ff;/*IE六、7识别*/
*background-color:#a200ff;/*IE六、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

　　

这里要注意的一点用法是在IE6下，

.myClass{
background:red!important;
background:green;
}

　　

那么，会显示绿色green。若是我这样子写呢？

.myClass{
background:green;
background:red!important;
}

　　

那么你会发现显示的背景为红色，亲测。那就说明，IE6不认识important了吗？固然是错的，

h1{
 background: red!important;
 }
 h1{
 background: green;
 }

　　

你会发现上面的样式在IE6下会显示红色，若是不认识，应该是绿色才对。

 

二、条件注释hack

<!--[if ie ]>
 
<![endif]-->
 
<!--固然用到的还有lt,gt,lte,gte，！-->

　　

三、选择器hack

说到选择器的hack，那真的是有不少不少了，

对于属性选择器，IE6都是不支持的，但IE7及以上是支持的

[attr*=val]//多个值
 
[attr^=val]
 
[attr$=val]
 
[attr~=val]//值之间有空格

　　

还有兄弟选择器，IE6都是不支持的，但IE7及以上是支持的

p + h1 //h1在p的后面相邻，两者有相同的父元素
 
p ~ h1 //全部在p的后面的h1都会选择出来

　　

再好比，最经常使用的伪类

:after

:before

IE8及以上支持，亲测。

对于css3的::after和::before伪元素与此伪类一直混淆不清，只知道IE9及以上才支持。

最后固然就是css3的一些伪类选择器了，只有IE9及以上才支持，彷佛css3的伪类选择器都只有IE9及以上才支持。

:root

:nth-child(n)

:nth-of-type(n)

详细能够参照官方文档

还能够参考这篇文章