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. git之关联远程仓库

    1.创建本地仓库. 2.与远程仓库交互. ----------------------------------------------------------------------------

  2. Fluxion无线攻击

    使用步骤 github地址 https://github.com/deltaxflux/fluxion 进入到fluxion目录下 ./fluxion 启动fluxion  启动之后会先检测没有安装的 ...

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

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

  4. double保留两位小数

    public static String format(double dValue, int lScale) { // ////负数,则装化为正数后进行四舍五入 boolean bFlag = fal ...

  5. iperf使用指南

    注意:iperf板上版本和PC上版本要一致,至少都要是2或者3,不能一个是2,一个是3. You also get a "connection refused" error whe ...

  6. CentOS7查看systemctl 控制的服务的相关配置

    例如,启动配置文件 [root@Docker_Machine_192.168.31.130 ~]# systemctl show --property=FragmentPath docker Frag ...

  7. sublime package control INSTALLATION

    Simple The simplest method of installation is through the Sublime Text console. The console is acces ...

  8. Docker 部署 portainer

    Docker 部署 portainer 环境: docker 版本 :18.09.1 主机地址:192.168.1.81 一.部署 porttainer 1.修改docker配置文件,开放端口. vi ...

  9. DataFrame 行列数据的筛选

    一.对DataFrame的认知 DataFrame的本质是行(index)列(column)索引+多列数据. DataFrame默认索引是序号(0,1,2…),可以理解成位置索引. 一般我们用id标识 ...

  10. (转载)UnityShader学习笔记(七) 让贴图纹理动起来(河流瀑布特效、精灵序列帧实现)

    大家好,我是Zander.这一章我们将使用纹理贴图实现动画.混合和真实特效来达到理想的效果. 纹理贴图可以使我们的着色器快速的实现逼真的效果,但是如果添加的纹理贴图过多,会非常影响游戏性能,特别是在移 ...