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隐藏，显示：无或可见性：隐藏（不要问）

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

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

这是IE漏洞还是我错过了什么？

Answer 1

可能与display: none有关 - 您可能还会发现隐藏的元素没有使用表单的其余部分提交其值。如果您可以控制它，则可以尝试positioning the elements off screen rather then hiding them。

Answer 2

这是一个将所有不同答案和选项汇总在一起的维基答案。

选项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。

Answer 4

此问题存在于IE6,7,8甚至当前的9 beta中。作为修复，将单选按钮放在屏幕外是一个好主意。

这是一个不必涉及设计师或CSS的替代方案：正常隐藏按钮，并使处理按钮的click事件的任何函数也处理标签的click事件。

Answer 5

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

谢谢Lane。我在这里添加它作为答案，所以人们不会忽视你的评论。

Answer 6

替换

style="display:none;"

带

style="-moz-opacity:0;filter:alpha(opacity:0);opacity:0;"

Answer 7

您可以尝试使用IE7,8：

input{
    position: absolute;
    z-index: -1;
}

而不是

input{
    display: none;
}

Answer 8

你的命题有一些很好的汇编：

input {
-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;
position: absolute;
}

而不是：

display: none;

Answer 9

我使用的是jQuery hide()函数，因此在不编写更复杂的代码的情况下更改元素隐藏的方式并不容易。我发现了这个想法：我使用class来存储checked属性，并在提交之前再次设置此属性。

if ($.browser.msie && $.browser.version == 7.0) {
$('input[type=radio]').click(function() {
    $('input[name="'+$(this).attr("name")+'"]').each(function(){
        if ($(this).attr("checked")){
            $(this).addClass("checked");
        }else{
            $(this).removeClass("checked");
        }
    });
});
$('form').submit(function(){
    $('input.checked').each(function(){
        $(this).attr("checked","true");
    });
});
}

在我的案例中，它就像一个魅力。

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

9 个答案: