<label> 中的 <input/> 在 Firefox 中不起作用答案

【问题标题】：<input/> inside <label> not working in Firefox<label> 中的 <input/> 在 Firefox 中不起作用
【发布时间】：2011-08-31 16:56:12
【问题描述】：

我目前的标记如下：

<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/ 工作示例

【问题讨论】：

标签： html css cross-browser forms

【解决方案1】：

可能是因为label 必须包含inline elements only，而不是像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>

【讨论】：

好主意，但我已经在 CSS 中更改了这一点，抱歉，我将把它添加到问题中。
您不能通过 CSS 将块元素设为内联元素。 HTML 解析器会在考虑 CSS 之前“纠正”您的输入。
CSS 与此无关，<label> 不能包含块级元素（按规范）。
规范很好，但每个其他浏览器都支持它，包括您指出的较新版本的FF。如果你问我，看起来它正在成为事实上的规范。
@jondavidjohn - HTML5 标准化它。以前，您受制于浏览器发生的任何错误恢复。它仍然是 HTML5 中的一个错误，只是在所有兼容 HTML5 的浏览器中从中恢复的结果都是相同的。

【解决方案2】：

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

【讨论】：

【解决方案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>

请参阅updated fiddle。

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

【讨论】：