当前位置:编程学习 > 网站相关 >>

IE下label中图片不能点击对应input

 代码如下 复制代码

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>


 

补充:网页制作,设计基础 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,