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

html-css025

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>

第一个li的高度高了,所以后面float的元素就卡住了。你可以直接在第一个li里面设置一下style="line-height:29px",就可以看出来效果了。反正就是这个的原因。至于怎么解决,没有找到问题产生的原因啊。。。。------解决方案--------------------.parameterslispan这个里面的字体大小影响的,改为12px就可以解决这个问题。至于为何这个字体会影响,估计是跟line-height在混杂模式下,浏览器的解释不同照成的吧。总结性的影响因素,还说不上来。。。

我的测试结果是:在IE6 IE8 火狐 谷歌浏览器 的最大化窗口下 屏幕分辨率是1024*768像素,显示是左右并排的两个div,在减小窗口宽度时,显示是上下两个并排的div;

IE8 火狐 谷歌浏览器效果几乎一样

IE6 有些不同,但总体效果差不多。

你是不是引用了其他样式?

我的测试页面如下:

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>测试</title>

<style type="text/css">

<!--

.left

{

margin-bottom: 15px

margin-left: 0px

float:left

width:200px

text-align:left

}

.right

{

margin-bottom: 15px

padding-left :215px

float:right

text-align:center

background-position: right bottom

width:500px

}

-->

</style>

</head>

<body>

<div class="left" style=" height:200pxbackground-color:#00BFAA"></div>

<div class="right" style=" height:200pxbackground-color:#FF3FFF"></div>

</body>

</html>