ie8如何兼容css中的选择器:before和:checked

html-css010

ie8如何兼容css中的选择器:before和:checked,第1张

为了实现ridio 选中ridio 样子自动变用了input:checked + .ridio {background-image:url(../img/radio1.png)}实现,但是后来发现:checked 选择器ie8以下不能识别,最近从一个大神那发现了了一个可以使ie8版本识别css3伪类和属性选择器selectivizr,地址为http://www.zhangxinxu.com/wordpress/2010/09/selectivizr-%E8%AE%A9ie6ie7ie8%E6%94%AF%E6%8C%81css3%E4%BC%AA%E7%B1%BB%E5%92%8C%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8/

实际使用时发现,ridio 选中样式不会随着点击选中而改变样子,看起来好像就没有什么作用。后来发现,原来在ie8下我的Input隐藏了display:none这种写法好像ie8默认不能点击,只能用filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)来透明隐藏住按钮,但是input所占的空间还是存在的,这样看起来比较丑,但是目前也没啥比较好的解决方法,只想这个样式在ie8以下使用就好,ie9以上还是用display:none来实现。

问题来了,之前是:root来区分ie9的hack的,结果selectivizr支持了:root属性,只能换了另一种写法

[html] view plain copy

<span style="font-size:14px">.hide{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)}

@media all and (min-width:0) {

.hide{display:none}

}

</span>

Selectivizr可以让IE6~8支持CSS3伪类和属性选择器,selectivizr是一个JavaScript工具,使IE浏览器也可以支持CSS3伪类以及属性选择器,使用很简单,只要把js include到页面上。示例代码如下:

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

<![endif]- ->

Selectivizr的优点在于:

1. 让老的IE浏览器支持19个CSS3伪类,2个伪元素,以及所有的属性选择器。

2. 即使你完全不懂JavaScript,也没有关系,因为你只要链接这个文件就ok了。

3. 可以与现存的JavaScript库协调工作。

加上<!DOCTYPE html>就可以兼容IE7 和 IE8 了。如果还想兼容IE6,那就只能用class了,不能用这种方法

只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。