<label>内的<input />在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/ <---- 工作实例

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>