<输入>里面的<标签>无法在 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 这样的块元素。

解决方案

用span替换所有div，保留预期的样式和功能，同时遵守上述规则。

<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

我无法复制你的问题，我正在使用 FF6，无论如何，你应该尝试验证你的 HTML，看看是否有任何东西可能导致 FF 的行为方式。还可以尝试清除缓存（你永远不会知道......）

Answer 3

您可以重新组织 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>

请参阅更新的小提琴。

我进行了这些更改并在 Linux 上使用 Firefox 3.6.12 进行了测试。