• IE下单选按钮隐藏后点击对应label无法选中的bug解决


    项目中,有时候填写表单我们的选项会隐藏掉radio或者checkbox,而只显示给用户对应的文字选择,如果用户点击label选择时,在FF/Chrome等标准浏览器中隐藏掉的radio/checkbox也同样随着改变选中状态,而在IE下则不会发生变化。
    代码示例:


    <input type="radio" name="gender" id="gender1" value="男" checked="checked" />
    <label for="gender1">男</label>
    <input type="radio" name="gender" id="gender2" value="女" />
    <label for="gender2">女</label>


    通过CSS设置display:none 或者 visibility: hidden隐藏掉radio按钮,则当点击label切换选择状态时,对应的按钮实际上是未被改变状态。解决方法有几种:


    1.通过javascript脚本来再次操作DOM保证选择状态


    $("label").click(function(e){
        e.preventDefault(); 
        $("#"+$(this).attr("for")).click().change(); 
    });
    2.不使用display:none,通过position属性定位到可视区域外,避开问题。
    position: absolute;
    top: -999px;
    left: -999px;
    3.通过z-index/width或透明度opacity将元素隐藏掉。
    input{
        position: absolute;
        z-index: -1;
    }
    或者是
    input{
    0;
    }
    或者是
    input{
    -webkit-opacity:0;
    -moz-opacity:0;
    opacity:0;
    filter:alpha(opacity:0);

    }



    目前IE6-IE9都有这样的问题,不知道IE以后会不会和标准浏览器的行为看齐。希望吧!!

  • 相关阅读:
    正则验证图片格式
    最近wifi连接局域网出现问题
    Linux vi 按键键盘映射表
    粗心少括号
    一个drop table用的时间
    asp 使用word模板生成word文件
    因为没有打开的文档,所以这一命令无效==操作word问题
    工程师进阶之路(二)
    word 中设置末一段落的行间距
    SQL自定义函数求当天最小时间和最大时间
  • 原文地址:https://www.cnblogs.com/fuhaots2009/p/3360895.html
Copyright © 2020-2023  润新知