DIV+CSS教程_解决IE下label中img无法点击对应input_div+css教程_H5之家

DIV+CSS教程_解决IE下label中img无法点击对应input

这是一个正常的单选列表，label里只有图片，填好弄好样式加上，label的for和input的id也对应上了，奇怪的事来了：
IE下点击图片怎么也对应不到下面的input，鼠标滑过input是有效果的说明for和id对应没有问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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;
  }
</style>
</head>
<body>
<ol>
  <li><label for="special01"><img src="" width="120" height="120" alt="" /></label><input type="radio" name="special" id="special01" /></li>
  <li><label for="special02"><img src="" width="120" height="120" alt="" /></label><input type="radio" name="special" id="special02" /></li>
  <li><label for="special03"><img src="" width="120" height="120" alt="" /></label><input type="radio" name="special" id="special03" /></li>
  <li><label for="special04"><img src="" width="120" height="120" alt="" /></label><input type="radio" name="special" id="special04" /></li>
  <li><label for="special05"><img src="" width="120" height="120" alt="" /></label><input type="radio" name="special" id="special05" /></li>
  <li><label for="special06"><img src="" width="120" height="120" alt="" /></label><input type="radio" name="special" id="special06" /></li>
  <li><label for="special07"><img src="" width="120" height="120" alt="" /></label><input type="radio" name="special" id="special07" /></li>
</ol>
</body>
</html>

之前在群里问了下，无解，无法解释IE是怎么对付这玩意，似乎只能换成背景图片。
想了想不甘心，动态图片放在背景多丑，刚好要改结构，拿出来折腾折腾。
加文字，文字的地方点有效果图片还是不行。。囧了。
再折腾了两下出来了，点击图片可以选中下面的单选按钮了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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="" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special01" /></li>
  <li><label for="special02"><img src="" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special02" /></li>
  <li><label for="special03"><img src="" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special03" /></li>
  <li><label for="special04"><img src="" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special04" /></li>
  <li><label for="special05"><img src="" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special05" /></li>
  <li><label for="special06"><img src="" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special06" /></li>
  <li><label for="special07"><img src="" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special07" /></li>
</ol>
</body>
</html>