IE浏览器存在一个BUG,当你使用label的for属性达到点击label使对应的表单元素聚焦,label中的内容为图片时,IE浏览器下不起作用。

例如:

<input type="checkbox" id="a"><label for="a"><img src="..."></label> 

  我们希望得到的效果是:点击“中国银行”,复选框会被选上(或者取消)。在FireFox,CHROME等浏览器下是没有问题的,但是IE浏览器却不吃这套。

解决的办法是使用JS:

window.onload = function(){
if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows")>-1)
{
var a = document.getElementsByTagName("label");
for(var i=0,j=a.length;i<j;i++){
if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG")
{
a[i].childNodes.item(0).forid = a[i].htmlFor;
a[i].childNodes.item(0).onclick = function(){
var e = document.getElementById(this.forid);
switch(e.type){
case "radio": e.checked|=1;break;
case "checkbox": e.checked=!e.checked;break;
case "text": case "password": case "textarea": e.focus(); break;
}
}
}
}
}
}

用图片作为label,for属性IE下不起作用的更多相关文章

  1. angularjs 绑定多个属性到下拉框

    绑定下拉框 angularjs  代码: //活动下拉切换 $scope.activityChange = function () { var cards = new Array(); var url ...

  2. 重写TreeView,多层级节点下批量显示图片,图片支持缩略图和文件名列表切换,支持调用者动态匹配选中,支持外界拖入图片并添加到对应节点下

    1.先看下整体效果 2.前端代码 <UserControl x:Class="iPIS.UI.Base.Tree.ImageTreeControl" xmlns=" ...

  3. CSS属性操作/下

    CSS属性操作/下 1.伪类 anchor伪类 跟<a>/</a>有关:专用于控制链接的显示效果 a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover( ...

  4. DedeCMS文章页去img图片width和height属性

    方法一:正则匹配去除 打开include/ arc.archives.class.php,查找代码: //设置全局环境变量 $this->Fields['typename'] = $this-& ...

  5. 绝对定位下margin的作用

    以前一直对绝对定位下的margin作用很模糊,今天细看一下 不使用top,left,margin等 <!DOCTYPE html> <html lang="en" ...

  6. linux下mnt目录作用

    linux下mnt目录作用 一.mount 英文解释 登上; 爬上; 攀登; 骑上; 乘上; 跨上 可直接理解为“挂载” 挂接光驱.USB设备的目录,加载后,会在mnt里多出相应设备的目录.mnt是m ...

  7. 转 /etc/ld.so.conf.d/目录下文件的作用

    在了解/etc/ld.so.conf.d/目录下文件的作用之前,先介绍下程序运行是加载动态库的几种方法:第一种,通过ldconfig命令    ldconfig命令的用途, 主要是在默认搜寻目录(/l ...

  8. jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用

    jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用

  9. xmlHttpRequest在Firefox下不起作用?

    描述: XMLHttpRequest 在IE下正常,在Firefox下不起作用. 原因: XMLHttpRequest 对象的 onreadystatechange 不会在Firefox下执行, 解放 ...

随机推荐

  1. CDN和智能DNS原理和应用 (原)

    CDN是什么? CDN的全称是Content Delivery Network,即内容分发网络. CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡.内容分发.调 ...

  2. Kafka笔记1(初步认识)

    Kafka 被称为“分布式提交日志”或“分布式流平台” 文件系统或数据库提交日志用来提供所有事务的持久记录,通过重放这些日志重建系统状态,同时Kafka数据是按照一定顺序持久化保存的,可以按需读取 K ...

  3. 查看容器IP地址

    我们可以通过以下命令查看容器运行的各种数据 docker inspect 容器名称(容器ID)  也可以直接执行下面的命令直接输出IP地址 docker inspect --format='{{.Ne ...

  4. Python之模块导入

    import sys #import module (.py)import functools #名词空间 functoolsprint(functools) print("-------- ...

  5. Subverion仓库迁移知识点整理

    目录 dump远程仓库内容到本地 可能碰到的问题 将dumpFile导入到本地仓库 可能碰到的问题 如何获取控制台信息 最近在工作上提出了一个需求,需要将各个团队的Subversion仓库进行集中管理 ...

  6. Kubernetes代码解读-apiserver之list-watch

    list-watch,作为k8s系统中统一的异步消息传递方式,对系统的性能.数据一致性起到关键性的作用.今天我想从代码这边探究一下list-watch的实现方式.并看是否能在后面的工作中优化这个过程. ...

  7. Electron: 从零开始写一个记事本app

    Electron介绍 简单来说,Electron就是可以让你用Javascript.HTML.CSS来编写运行于Windows.macOS.Linux系统之上的桌面应用的库.本文的目的是通过使用Ele ...

  8. springMVC学习之路4-最后的征程:整合hibernate

    今天小编很开心,因为学习springMVC基础的路终于走到了尽头,也成功搭建了一个SSH框架,暗自在心里默默地开心了1秒钟. 好了,回归正题:整合Hibernate.上一节,我为大家分享我整合spri ...

  9. 生成id

    package com.develop.web.util; import java.security.MessageDigest; import java.text.SimpleDateFormat; ...

  10. oracle insert、append、parallel、随后查询的redo与磁盘读写

    SQL> set autotrace traceonly statistics; SQL> insert into big_table_dir_test1 select * from bi ...