IE - 单击相应标签时未选中隐藏单选按钮

Question

我刚注意到IE7中的一个奇怪的行为.

我有带有相关标签的单选按钮,如下所示:

<input type="radio" name="filter" id="filter_1" value="Activities" checked="checked" />
<label for="filter_1">Activities</label>

<input type="radio" name="filter" id="filter_2" value="Services" />
<label for="filter_2">Services</label>

单选按钮通过css隐藏,显示:none或visibility:hidden(不要问)

问题是 - 当我点击IE7中的标签(尚未查看其他IE版本)时,实际上没有检查相关的单选按钮.我用jquery确认了这一点 - 标签点击事件被触发,但单选按钮点击事件却没有.表单帖子还确认已选中的单选按钮不会更改.

这在firefox中正常工作,如果我删除隐藏单选按钮的CSS也能正常工作.

这是一个IE错误还是我错过了什么？

Answer 1

它可能与display: none- 你也可能发现隐藏的元素没有使用表单的其余部分提交它们的值.如果您可以控制它,您可能想尝试将元素放在屏幕外,而不是隐藏它们.

Answer 2

这是一个wiki的答案,汇集了所有不同的答案和选项.

选项1:将元素移出屏幕而不是完全隐藏它

position: absolute;
top: -50px;
left: -50px;

选项2:使用一些JavaScript将单选按钮设置为在单击标签时进行检查

$("label").click(function(e){
    e.preventDefault(); 
    $("#"+$(this).attr("for")).click().change(); 
});

选项3:将元素的宽度和/或不透明度设置为零

width: 0;
/* and/or */
-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;
outline:none; /* this prevents IE8 from having the line around it even though it's invisible */

选项4:使用其他浏览器:)

基本上,这些事情的规范没有具体说明要使用什么行为,但IE通常采取的立场是,如果它不能被看到,那么它就不起作用."看到"和"工作"可能意味着不同的东西,但在这种情况下,它意味着当display:none设置时,标签不会激活单选按钮,这导致IE中许多内容所需的常用解决方法.

Answer 3

这适合我

width: 0px;

在IE7和IE8中测试过.纯CSS没有javascript.