记录IE下一个bug，label下的图片聚焦表单元素失效
发表时间: August 20, 2009 分类: WebBuild 9条评论
应该有很多朋友已经发现过这个神奇的BUG，此BUG在IE5.5-IE8下通吃，就是当label中是图片元素的时候，无法通过点击该图片来激活绑定的表单元素，请用IE看这里>>
已有朋友提供使用添加元素+背景图+绝对定位遮盖的方法来解决这个问题，请看这里>>
这种办法在使用中可能比较麻烦，因为图片极大的可能性是不一样的，并且一般背景图和页面图片会存放在不同的文件夹甚至服务器上，加上设计者的权限等乱七八糟的问题，可能麻烦性更大。
还有一种方法就是可以使用js来实现，比较简单，虽然在无js支持的情况下会失效。我想的是：js都不支持的浏览器也不在乎多这点可访问性的牺牲。（接受异议）
基本代码：
<script type="text/javascript">
var lb=document.getElementsByTagName('label');
for (i=0;i<lb.length;i++) {
lb[i].onclick=function () {
var lbfor=this.getAttribute('for')?this.getAttribute('for'):this.getAttribute('HTMLfor')+'';
document.getElementById(lbfor).click();
document.getElementById(lbfor).focus();
}
}
</script>
可以通过这里查看>>
事件处理比较简单，你可以自己修改针对不同类型的表单元素使用switch来触发条件，对于checkbox框再来判断是否选正等，我省略了这些，就在js前加了IE判断。
两个小插曲:
