将 <label> 包裹在其他元素周围有什么问题吗？答案

【问题标题】：Is there something wrong with wrapping <label> around other elements?将 <label> 包裹在其他元素周围有什么问题吗？
【发布时间】：2013-07-13 07:12:43
【问题描述】：

我想让表格中的三个单元格在您单击它们时选中相应的复选框，所以我用标签标记将它们包装起来。

<table>
  <tr>
    <td>
      <input id="input_id" type="checkbox">
    </td>
    <label for='input_id'>
      <td>stuff</td>
      <td>stuff</td>
      <td>stuff</td>
    </label>
  </tr>
</table>

不幸的是，这破坏了点击功能。通常，当您单击标签中的文本时，它会切换检查，但这不适用于包装元素。任何想法为什么？应该这样做，还是出于某种原因这是一个坏主意？

有趣的是，如果我在具有相同“for”属性的单元格内容周围使用三个单独的标签，它确实有效....

【问题讨论】：

我刚刚进行了测试，它可以在 Chrome 上运行。您使用的是哪个浏览器？从技术上讲，这不是有效的 HTML。您需要在标签内包含和标签才能有效，这可能会有所帮助。

对不起，我并不是要让我的 html 有效性成为问题的重点。我已经更新了结构以减少混乱。我使用的是 chrome，只有将每个单元格内容包装在标签中才能使其工作。例如：jsfiddle.net/rxwHp

标签： html label

【解决方案1】：

按照您的示例编写无效标记是个坏主意。应该包装td 的唯一元素是tr。

就目前而言，您的示例不会破坏点击功能，因为 td 标记将被解析器丢弃。

但是，如果示例位于 table 和 tr 元素中，则 input 和 label 元素将移至 table 之前，因此不会包装 tds 或“stuff”文本 (留在表格内），因此单击该文本将无效。

【讨论】：

即使在“取消省略”其余表格元素之后，这正是发生的情况，但这种行为背后的原因是什么？只要它们实际上是输入的标签，您是否应该能够在标签中使用任意数量的元素？
真的，原因是它必须以这种方式工作以使浏览器能够处理旧的 HTML。一些曾经主导市场的旧浏览器（在这种情况下可能是 Netscape 2 或 3）就是这样做的，网页开始依赖它，所以所有现代浏览器也必须这样做。因此，一些解析规则非常奇怪，你只需要接受它必须是这样的。