Question

我注意到如果你在标签中包含一个单选按钮或复选框，整个东西就变成了可点击的，即使没有for / id对（事实上，它似乎忽略了这一点，因为我搞砸了！）

示例：

<label><input type="checkbox"> some text</label>

然后“某些文字”变为可点击以选中该框。我在FF，Chrome和Opera以及IE8中进行过测试，是否有人知道它是否适用于旧版浏览器，如IE6？

Answer 1

是的，这是预期的行为。

http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9

要隐式地将标签与另一个控件相关联，控制元素必须位于LABEL元素的内容中。在这种情况下，LABEL可能只包含一个控制元素。标签本身可以位于相关控件之前或之后。

看起来这在IE6中实际上并不起作用（还没试过其他版本）。如果你已经在页面上加载了jQuery，那么你可以很容易地找到一个可行的解决方案：

if ($.browser.msie) {
    $('label:has(:input):not([for])').each(function() {
        var $t = $(this)
            , $in = $t.find(':input')
        ;
        if (!$in.attr('id')) {
            // use this, or make a proper GUID...
            $in.attr('id', 'input_' + (Math.random() * 1000000));
        }
        $t.attr('for', $in.attr('id'));
    });
}

Answer 2

在版本7中，包装label元素在Internet Explorer中已损坏Link（Google Cache可绕过注册烦恼）。

标签包裹在收音机/复选框兼容性？

2 个答案: