2009年8月

应该有很多朋友已经发现过这个神奇的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判断。

两个小插曲:

  1. 在IE下使用getAttribute获得的值类型是Object,需要处理下,关于这点请参考rank的这篇文章
  2. 感谢屈屈提示在IE8以下版本的IE无法直接通过some.getAttribute('for')的方法获取到for的值,因为for是保留字,类似的还要class,需要使用HTMLfor。