IE8中，图片lebel不能正常使用解决办法

http://www.cnblogs.com/mybest/articles/1743786.html

 

http://ryx.utan.com/survey/slimming/twostage

例子

 

<label for="colortwo"><img src="/card/images/cardblack.jpg" width="321" height="204"/></label>
<input name="colors" id="colortwo" type="radio" value="" /><label for="colortwo">black-and-white</label>

<label for="colortwo"><img src="/card/images/cardblack.jpg" width="321" height="204"/></label>
<input name="colors" id="colortwo" type="radio" value="" /><label for="colortwo">black-and-white</label>

 

 

以上代码，在IE8中运行不正常，在火狐中正常。没有感觉不对劲的地方。后来搜索，网上给了一个答案，不过感觉不太理想，自己改进了一下，先看代码，再给改进方案。

 

网上解决方案

 

<style>
s {height:204px;
    width: 323px;
    position: absolute;
    z-index:100;
    filter:alpha(opacity=0);
    background-color: #FFF;
}
</style>

<label for="colorfull"><s></s><img src="/card/images/cardcolor.jpg" width="321" height="204" /></label>
<input name="colors" id="colorfull" type="radio" value="" /><label for="colorfull">color</label>

<label for="colortwo"><img src="/card/images/cardblack.jpg" width="321" height="204"/></label>
<input name="colors" id="colortwo" type="radio" value="" /><label for="colortwo">black-and-white</label>

这个解决方案不好的方就在于，这里用了一个层，来覆盖图片，给了这个层一个白色背景色，又把这个背景色设置为透明。虽然IE骗过去了，但火狐不吃透明度这一套。依旧显示白色一大块。

 

改进方案

 

<style>
s{
height:204px;
width: 323px;
position: absolute;
z-index:100;
background-image: url(../images/tan.gif);
}
</style>