今天想用点击图片选中radio按钮，但是在IE浏览器测试时发现bug，点击图片时radio按钮不能选中，但鼠标经过时radio有反应点击图片就是不能选中状态，想了好久终于得到解决方法
| 代码如下 |
|
|
HTML 代码:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE下label中img无法点击对应input的解决方法</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:12px/1.5 Arial;}
label{cursor:pointer;}
li{
position:relative;
display: inline-block;
width:130px;
margin-right:27px;
text-align:center;
*display: inline;
zoom:1;
vertical-align:top;
}
li img{
display:block;
padding:5px;
background-color:#E9E5E0;
}
li s{
position:absolute;
display:block;
width:120px;
height:120px;
padding:5px;
top:0;
left:0;
filter:alpha(opacity=0);
background-color:#fff;
}
</style>
</head>
<body>
<ol>
<li><label for="special01"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special01" /></li>
<li><label for="special02"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special02" /></li>
<li><label for="special03"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special03" /></li>
<li><label for="special04"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special04" /></li>
<li><label for="special05"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special05" /></li>
<li><label for="special06"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special06" /></li>
<li><label for="special07"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special07" /></li>
</ol>
</body>
</html>
|
