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

 

 

例子

 

<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>

 

这里的区别就是将背景色换为背景图片，这一套，不管哪个浏览器都要认可，只要把这个背景图片做这透明的即可。

 

看来IE8有时也让人头疼。