Selectivizr-让IE6~8支持CSS3伪类和属性选择器

这篇文章发布于 2010年09月14日，星期二，23:36，归类于 CSS相关。 阅读 145373 次, 今日 2 次 20 条评论

 

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1104

此项目首页：http://selectivizr.com/

一、下载和demo

下载：
您可以狠狠地点击这里：selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K)

demo:
您可以狠狠地点击这里：Selectivizr部分属性测试demo

二、简介

selectivizr是一个JavaScript工具，使IE浏览器也可以支持CSS3伪类以及属性选择器，使用很简单，只要把js include到页面上，然后你就可以(～ o ～)~zZ补觉了。

优点在于：
1. 让老的IE浏览器支持19个CSS3伪类，2个伪元素，以及所有的属性选择器。
2. 即使你完全不懂JavaScript，也没有关系，因为你只要链接这个文件就ok了。
3. 可以与现存的JavaScript库协调工作。
现存的一些JavaScript库 张鑫旭-鑫空间-鑫生活

三、使用

直接调用JavaScript文件就可以了：

<script type="text/javascript" src="[JS library]"></script>

<!- -[if (gte IE 6)&(lte IE 8)]>

      <script type="text/javascript" src="selectivizr.js"></script>

      <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>

<![endif]- ->

//zxx:由于某些原因，我把上面连续的两个短连线给分开了

上面的noscript的内容，我个人觉得是可有可无的。按照原作者的说法，JavaScript文件要放在页面的<head>标签里，而且需要使用一种下图所示的JavaScript库。

下图为JavaScript库和Selectivizr对CSS3伪类等特性的支持情况表的截图（点击图片可查看大图）：
JavaScript库与selectivizr对CSS3伪类支持情况表 张鑫旭-鑫空间-鑫生活

四、必须知道的一些注意事项

1. Selectivizr自动检测最佳的JavaScript库，如果你一个JavaScript库都没有调用，则IE下的伪类是不起作用的。
2. 样式属性必须使用<link>标签，但是你可以使用@import在你的样式表里面，以<style>标签定义的CSS样式是不会被解析的。
3. 由于安全原因，样式文件需以域的形式调用，像是file:是不起作用的。
4. 此效果非动态的。一旦样式被应用就被固定了，DOM改变时不会映射过去的。
5. 如果JavaScript不可以，你可以使用<noscript>标签调用一个用以反馈提示的样式文件。
6. Selectivizr要想在IE下起作用，需要时标准模式，请检查您的页面头部是否有DTD 。

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1104

（本篇完）

相关文章
«上一篇
下一篇»
分享到：
标签： , , , , , , , ,


发表评论（目前20 条评论）

  1. Ivy说道：
    2016年08月1日 15:39

    我这边为啥一直是拒绝访问的呢

    回复
  2. taadis说道：
    2016年07月27日 09:41

    能否帮忙解决下如下内容在IE8下label样式无法改变的问题?

    input:checked + label{ color: red;}

    学生

    教师

    管理员

    回复
  3. 西西说道：
    2015年11月10日 16:05

    旭哥哥，可否解决下select在ie8下面选中option的时候去掉蓝色的背景色。

    回复
    • 西西说道：
      2015年11月10日 16:06

      哦哦 ，对 了 我补充下 还有就是type radio在ie8下面显示的不完全（一半有颜色，一半无颜色）。

      回复
  4. 不支持2D3D变换说道：
    2015年09月3日 16:46

    这个插件不支持2D3D变换，不知是我不会用还是另有妙法！！！求❤旭解答

    回复
  5. 东子说道：
    2015年06月26日 11:03

    不错啊。现在已经1.0.2了。

    回复
  6. 八戒说道：
    2014年09月17日 14:06

    欧巴 不行啊 ~~我也用的1.4的jq库~~

    回复
  7. kevin说道：
    2014年08月7日 10:47

    没效果。哦~原来要先加载jq

    回复
  8. ants说道：
    2014年07月17日 17:10

    表示毫无效果！

    回复
  9. 好大一个坑说道：
    2014年07月17日 14:49

    看完标题，以为是能出来CSS3效果呢。。。。
    结果只是一个选择器，老大，太害人了，我试了半天。。。。

    回复
  10. 诸葛小觉说道：
    2014年04月17日 09:59

    如果能够支持:before就好了

    回复
  11. 袁源说道：
    2013年09月12日 15:21

    Style sheets MUST be added to the page using a tag but you can still use @import in your style sheets. Styles defined in tags won’t be parsed. 是不是这个原因……试验好了告诉你。。。

    回复
  12. 袁源说道：
    2013年09月12日 15:16

    同表示没起作用

    回复
  13. linx4200说道：
    2012年11月22日 20:18

    既然一定要调用一个javascript的库
    如果是jQuery的话
    就不需要插件了吧
    因为单靠jQuery就可以完全实现属性选择器呀~

    回复
  14. 前端菜鸟说道：
    2012年10月30日 14:44

    貌似没起作用啊！我照做了，但是没效果。ie8下
    .nav li:nth-child(2n+1) .abtn {background: #000 !important;}
    但是没起作用，求指点。

    回复
  15. 伪类如何放在标签里面？说道：
    2011年09月24日 09:56

    尊敬的鑫大哥 伪类如何放在标签里面 比如：before :after

    回复
  16. 墨枫说道：
    2010年12月14日 20:37

    貌似没起作用，不知道是什么原因~

    回复
  17. 光说道：
    2010年09月15日 18:18

    http://code.google.com/p/ie7-js/
    记得以前用过这个 不知是否一样

    回复