IE 不尊重 <anchor> 中的 <label>答案

【问题标题】：IE doesn't respect <label> within <anchor>IE 不尊重 <anchor> 中的 <label>
【发布时间】：2013-09-22 04:24:48
【问题描述】：

所以我刚刚发现 IE（即使是当前的 10 和 11）不支持锚标签中的标签……但确实支持所述标签中的 onclick 操作。当我更新菜单系统并想使用标签将菜单描述与关联的快捷方式分开时遇到了这个问题。 “重定向/处理”模式窗口出现得很好，但是事情就在那里。

<a target="_blank" href="http://www.google.com" onclick="console.log('you clicked me')">
    <label>I am a first label</label>
    <label>Look @ me, I'm second!</label>
</a>

当我深入研究这个奇怪的话题时，我发现标签之间的空格表现得恰到好处......只有当我将鼠标悬停在标签上时，我才无法在此处使用 href outta。

那么……解决办法是什么？

【问题讨论】：

<label> 元素标签表单控件。单击它们会聚焦关联的表单控件。我看不出它们如何适合在链接中使用。
您的 HTML 无效。 <a> 的内容模型是透明的，但不能有交互式内容后代。。 <label> 是互动内容。
关于 === 交互式内容的好点...它们只是作为内联块开箱即用。欣赏 cmets，但不是 -1...这仍然是事实...真正的问题是为什么它仍然允许 onclick 事件冒泡。

标签： html internet-explorer hyperlink anchor labels

【解决方案1】：

使用跨度...就是这样...

<a target="_blank" href="http://www.theonion.com" onclick="console.log('you clicked me')">
    <span>I am another first label</span>
    <span>Look @ me, I'm another second!</span>
</a>

http://jsfiddle.net/bdGPB/1/

【讨论】：