IE 9 中的输入单选按钮悬停问题

Question

我在 IE9 中遇到了问题：每当我将鼠标悬停在我的 顶级 包装 div 上时，第一个单选按钮就像悬停在上面一样。因此，即使我按下了最后一个无线电输入，如果我单击包装器中的任何位置，无线电将返回到第一个。一旦我将鼠标悬停在包装 div 上，第一个无线电输入上的浅蓝色就会变回应有的灰色。

我的页面在 FF、Chrome 和 IE 兼容模式下按预期工作。

我尝试使用输入创建一个简单的页面，但无法重现问题，因为它发生在我的大型网页中。

任何关于可能导致此问题的原因和/或如何阻止它的输入将不胜感激。

编辑#1：我的代码：

<div id="wrapper">
...
<div id="region_sel_type">
    <input type="radio" id="optLine" name="radio_region_sel_type" value="Line" /><label id="lblForOptLine" for="optLine" title="Line" unselectable="on"></label>
    <input type="radio" id="optPoint" name="radio_region_sel_type" value="Point" /><label id="lblForOptPoint" for="optPoint" title="Point" unselectable="on"></label>
    <input type="radio" id="optPolygon" name="radio_region_sel_type" value="Polygon" /><label id="lblForOptPolygon" for="optPolygon" title="Polygon" unselectable="on"></label>
    <input type="radio" id="optList" name="radio_region_sel_type" value="List" /><label id="lblForOptList" for="optList" title="Input Coordinates" unselectable="on"></label>
    <input type="radio" id="optUploadKML" name="radio_region_sel_type" value="KML" /><label id="lblOptUploadKML" for="optUploadKML" title="Upload KML" unselectable="on"></label>
    <input type="radio" id="optOpen" name="radio_region_sel_type" value="Open" /><label id="lblForOptOptn" for="optOpen" title="Open Saved ROI" unselectable="on"></label>                   
</div> 
...
</div>

解决方案： 在“包装器”div 的某个地方，我有一个 IE9 不支持的自动关闭标签（即使它们应该支持）

<label id='x'/>

Answer 1

您所描述的是label 标记的行为。标签标签的作用就像一个悬停和点击目标的输入，在标签的for 属性中指定了id。

您可能无意中将一个大标签应用于一个特定的单选按钮，或者其中一个单选按钮错误关闭，导致它包裹整个div。

您是否检查了所有label 标签以确保没有错误关闭？

---

既然你的问题已经解决了，我想我应该在这里添加一个关于 HTML 5 中的自闭合标签 的注释。

XHTML 开始以严格的 XML 诱惑世界。现在我们处于 HTML 5 世界中，很容易相信这仍然是正确的。但是，HTML 5 不知道 /> 是什么。相反，它会尝试为您自动关闭一些标签。

因此，在您的情况下，听起来大多数浏览器将隐式 </label> 放置在预期的位置，但有一个浏览器将其放置在上下文之外。无论哪种方式，很可能他们都不关心/>。

还记得我们的老朋友<p style="color:red;"><div>Why am I not red?</div></p>吗？ HTML 将</p> 放在<div> 之前，因为<p> 标签内不允许有块元素。

最好的办法就是改掉在任何地方都使用/> 的习惯，除了总是没有内容的元素（link、br、img 等）——即便如此，你可能只是为了代码可读性而这样做，因为在解析中，它完全没有区别）。

更多信息在这里：http://tiffanybbrown.com/2011/03/23/html5-does-not-allow-self-closing-tags/