внутри <label>не работает в Firefox

Question

моя текущая разметка выглядит следующим образом:

<li class="multi_answer"> 
    <label for="checkbox2">
        <div class="multi_answer_box">
            <input type="checkbox" id="checkbox2" name="checkbox2" class="multi_box" />
        </div>
        <div class="multi_answer_text">Checkbox Label</div>
    </label>
</li>

прекрасно работает во всем НО firefox.

после проверки разметки, она читается как ...

<li class="multi_answer">
    <label for="checkbox1"> </label>
    <div class="multi_answer_box">
        <input id="checkbox1" class="multi_box" type="checkbox" name="checkbox1">
    </div>
    <div class="multi_answer_text"> Increased counseling staff </div>
</li>

идей, почему FF будет интерпретировать это так?

Я также использую этот css

.multi_answer label:hover {
    background:#DDD;
}

.multi_answer_box input {
    padding-left:5px;
    padding-right:5px;
    float:left;
    height:48px;
    width:48px;
}

.multi_answer label {
    overflow: auto;
    cursor:pointer;
    width:auto;
    margin:10px;
    padding: 10px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background:#CCC;
    display:block;
}

http://jsfiddle.net/NhD3r/1/ <---- <strong>рабочий пример

Answer 1

Возможно, потому что label должен содержать только встроенные элементы , а не блочные элементы, такие как div.

РЕШЕНИЕ

замена всех div сохраненными намеченными стилем и функцией span при соблюдении вышеуказанного правила.

<li class="multi_answer"> 
    <label for="checkbox2">
        <span class="multi_answer_box">
            <input type="checkbox" id="checkbox2" name="checkbox2" class="multi_box" />
        </span>
        <span class="multi_answer_text">Checkbox Label</span>
    </label>
</li>

Answer 2

Вы можете реорганизовать структуру HTML, чтобы она была действительной и соответствовала спецификации, но при этом вы могли получить желаемый эффект.

<li class="multi_answer">
    <div class="multi_answer_box">
        <input type="checkbox" id="checkbox3" name="checkbox3" class="multi_box" />
        <label for="checkbox3">Did some additional important stuff and things,
               with a description that's long enough to wrap</label>
    </div>
</li>

См. обновленную скрипку .

Я внес эти изменения и протестировал Firefox 3.6.12 в Linux.

Answer 3

Я не могу воспроизвести вашу проблему, я использую FF6, в любом случае, вы должны попытаться проверить ваш HTML и посмотреть, есть ли что-нибудь, что может заставить FF вести себя так, как он. Также попробуйте очистить кеш (вы никогда не узнаете ...)