项目中,有时候填写表单我们的选项会隐藏掉radio或者checkbox,而只显示给用户对应的文字选择,如果用户点击label选择时,在FF/Chrome等标准浏览器中隐藏掉的radio/checkbox也同样随着改变选中状态,而在IE下则不会发生变化。
注意,需要指定表单元素的id属性然后使用label的for属性绑定控件。
代码示例:
通过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{
width: 0;
}
或者是
input{
-webkit-opacity:0;
-moz-opacity:0;
opacity:0;
filter:alpha(opacity:0);
}
需要提醒的是,label的for属性是内联元素,其对应的js属性为htmlFor,例如可以这样访问或设置for属性值。document.getElementById("xxx").htmlFor="inputid";;
目前IE6-IE9都有这样的问题,不知道IE以后会不会和标准浏览器的行为看齐。希望吧!!
IE下单选按钮隐藏后点击对应label无法选中的bug解决
发表于:2017-01-09
作者:网络转载
来源:
- 周排行
- 月排行
- 评论排行
-   记录一次Bug解决过程:可维护性和性能优化
-   深入BUG分析
-   缺陷管理之Bug修复
-   软件缺陷的有效管理
-   四个Bug对你的好处
-   网页Bug和不同浏览器下兼容性问题的处...
-   Bug为什么不能彻底消除?
-   游戏测试常见Bug整理
-   缺陷是什么?
-   如何提高自身编码能力--定位Bug篇
-   如何看待那些不能重现的Bug?
-   简单易懂的缺陷分析笔记
-   深入BUG分析
-   实例!软件缺陷数据度量和分析
-   从软件出发,非功能测试思考总结
-   展望2017,谁是网络技术头牌?
-   C/C++单元测试工具Visual Unit 4 介绍
-   国内外最好用的6款Bug跟踪管理系统
-   性能测试指标评估必读
-   百度软件测试方案模板
-   38张史上最全的IT工程师技能图谱
-   C/C++单元测试工具Visual Unit 4 介绍
-   2019年,你会选哪些安全测试工具?
-   十款Web服务器性能压力测试工具
-   软件测试入门指南:周期、模型和文档化
-   记自动化测试成神学习之路
-   软件测试全景图 -最全的思维导图