html - Internet Explorer 10+ 上的输入元素悬停问题

Question

让我们有一个 label 元素，其中正确指定了 for 属性。此标签稍后将在点击事件上绑定(bind)一些操作，因此我们想要更改标签在悬停时的外观以指示点击它的选项。

但是，如果您打开 IE 10/11 并将光标放在标签对应的输入元素上，标签的 :hover 伪类将激活!

我试过 float 标签并输入和设置position:absolute。我能找到的唯一解决方案是更改/删除标签的 for 或输入的 id ，这样它们就不会相互连接了。但这不是一个好的解决方案，因为它在语义上断开了这两个元素，并且可能会导致屏幕阅读器出现问题。有没有其他方法可以解决这个错误？

JSFiddle:fiddle

带有损坏的 for-id 链接的 JSFidde:fiddle

Answer 1

如果稍微更改一下 HTML 结构，则根本不必使用“for”。是的，标签和输入仍然“连接”。

<div>
  <label>
    <span>label</span>
    <input id="test" type="text">
  </label>
</div>

示例如下:

http://jsfiddle.net/Vq8kN/8/