Наклейка вокруг радио / флажок совместимость?

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

Обтекание label элементы не работают в Internet Explorer вплоть до версии 7. Ссылка (Google Cache для обхода раздражения при регистрации).