CSS或HTML解决IE下label中IMG图片无法选中radio的方法

发布时间:2020-06-10编辑:脚本学堂
本文讲了用两种方法解决在IE下label中IMG图片无法选中radio的例子,即:CSS与HTML,有需求的朋友学习一下。

在IE浏览器下有时会遇到这样一个问题,使用label FOR radio后,label中的图片无法选中。例如:
 

复制代码 代码示例:
<input type="radio" name="radio" id="a" /><label for="a"><img src="/Labs/images/logo.gif" /></label>

以上情况下,点击label的图片将无法选中radio选项。要使label中IMG图片可以选中radio
,目前有两种方法,分别是通过CSS或者HTML代码2个方面来解决。
方法1,CSS:
在图片上覆盖一个容器,容器本身透明显示
 

复制代码 代码示例:
?<input type="radio" name="radio" id="a" /><label for="a"><img src="xxx.jpg" /><span></span></label>
将其中SPAN的属性设定有底色并且透明,SPAN覆盖到IMG上,并保持和图片同样的尺寸。
display:block;
width:100px;
height:100px;
background:url(xxx.png) no-repeat 0 0;
position:absolute;
left:0;
top:0;

方法2,HTML代码控制:
在IMG中加一个属性,disabled 即可。

 总之两种方法都是可以解决的方案,从实用方面,第二种方法简单,操作和实施起来快,兼容性也好。但这仅仅是在上面情况下的解决方法,如果在经验方面,两种方法都有自己的优势。