css常用hack - JMing依然
JMing依然发表于 2015-06-26 14:17:00
原文地址：css常用hack
突然想起今天早上在CNZZ看到的统计数据，使用IE6、7的用户比例还真多，看到之后我的心都碎了。微软都放弃了为毛还有这么多人不死心？
所以说，IE下的兼容还是得做的。 –，–
css hack分为3种，即属性hack，IE条件注释hack，CSS选择器Hack
1、属性hack
对于这个我只想说网上各种答案都有，只知道复制粘贴，好多错误，测试一下不就知道了。
.myClass{
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9;/*IE6、7、8、9、10识别，但是IE11不支持，亲测*/
background-color:#00deff\0;/*IE8、9、10、11识别,据说还有opera*/
background-color:#00deff\9\0;/*IE8、9、10识别*/
+background-color:#a200ff;/*IE6、7识别*/
*background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9;/*IE6、7、8、9、10识别，但是IE11不支持，亲测*/
background-color:#00deff\0;/*IE8、9、10、11识别,据说还有opera*/
background-color:#00deff\9\0;/*IE8、9、10识别*/
+background-color:#a200ff;/*IE6、7识别*/
*background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
这里要注意的一点用法是在IE6下，
.myClass{
background:red!important;
background:green;
}
background:red!important;
background:green;
}
那么，会显示绿色green。如果我这样子写呢？
.myClass{
background:green;
background:red!important;
}
background:green;
background:red!important;
}
那么你会发现显示的背景为红色，亲测。那就说明，IE6不认识important了吗？当然是错的，
h1{
background: red!important;
}
h1{
background: green;
}
background: red!important;
}
h1{
background: green;
}
你会发现上面的样式在IE6下会显示红色，如果不认识，应该是绿色才对。
2、条件注释hack
<!--[if ie ]>
<![endif]-->
<!--当然用到的还有lt,gt,lte,gte，！-->
<![endif]-->
<!--当然用到的还有lt,gt,lte,gte，！-->
3、选择器hack
说到选择器的hack，那真的是有很多很多了，
对于属性选择器，IE6都是不支持的，但IE7及以上是支持的
[attr*=val]//多个值
[attr^=val]
[attr$=val]
[attr~=val]//值之间有空格
[attr^=val]
[attr$=val]
[attr~=val]//值之间有空格
还有兄弟选择器，IE6都是不支持的，但IE7及以上是支持的
p + h1 //h1在p的后面相邻，二者有相同的父元素
p ~ h1 //所有在p的后面的h1都会选择出来
p ~ h1 //所有在p的后面的h1都会选择出来
再比如，最常用的伪类
:after
:before
IE8及以上支持，亲测。
对于css3的::after和::before伪元素与此伪类一直混淆不清，只知道IE9及以上才支持。
最后当然就是css3的一些伪类选择器了，只有IE9及以上才支持，似乎css3的伪类选择器都只有IE9及以上才支持。
:root
:nth-child(n)
:nth-of-type(n)
详细可以参照官方文档
还可以参考这篇文章
本文链接：css常用hack，转载请注明。