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" "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;
}
</style>
</head>
<body>
<ol>
<li><label for="special01"><img src="http://www.baeor.info/works/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /></label><input type="radio" name="special" id="special01" /></li>
<li><label for="special02"><img src="http://www.baeor.info/works/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /></label><input type="radio" name="special" id="special02" /></li>
<li><label for="special03"><img src="http://www.baeor.info/works/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /></label><input type="radio" name="special" id="special03" /></li>
<li><label for="special04"><img src="http://www.baeor.info/works/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /></label><input type="radio" name="special" id="special04" /></li>
<li><label for="special05"><img src="http://www.baeor.info/works/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /></label><input type="radio" name="special" id="special05" /></li>
<li><label for="special06"><img src="http://www.baeor.info/works/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /></label><input type="radio" name="special" id="special06" /></li>
<li><label for="special07"><img src="http://www.baeor.info/works/edwardshaw/images/trends/index03.jpg" 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" "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="http://www.baeor.info/works/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="http://www.baeor.info/works/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="http://www.baeor.info/works/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="http://www.baeor.info/works/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="http://www.baeor.info/works/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="http://www.baeor.info/works/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="http://www.baeor.info/works/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special07" /></li>
</ol>
</body>
</html>
原理：在label里套了个和图片大小宽高等同的标签(span、s、b，哪个字节小哪个方便拿哪个)，透过点击这个标签实现选中对应input。
加了没效果的？加个背景色，OK了。你说那不行，挡住图片了，那让它透明吧，于是加个filter:alpha(opacity=0); 
| Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
| HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
| ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |
QQ：2693987339(点击联系)购买教程光盘
:
