转载

css常用hack

原文地址： 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识别*/ }

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

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

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

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

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

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

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

2、条件注释hack

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

3、选择器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)

详细可以参照官方文档

还可以参考这篇文章

正文到此结束

所属分类：编程技术

本文标签： 注释微软 CSS 数据测试 root
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

css常用hack

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流