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

Question

我在 IE9 中遇到问题:每当我将鼠标悬停在我的顶层包装器 div 上时，第一个单选按钮就像悬停在上面一样。所以即使我按下了最后一个 radio 输入，如果我点击包装内的任何地方， radio 也会回到第一个。一旦我将鼠标悬停在包装器 div 上，第一个 radio 输入的浅蓝色就会变回灰色。

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

我尝试创建一个带有输入的简单页面，但无法重现我的大型网页中出现的问题。

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

编辑#1:mycode:

<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 的行为标签。 Label 标签就像悬停和单击输入的目标一样 id在标签的 for 中指定属性。

要么您无意中将大标签应用到一个特定的单选按钮，要么其中一个未正确关闭，导致它包裹了整个 div .

你检查过你所有的label了吗？标签以确保没有错误关闭？

---

既然您的问题已经解决，我想我应该在此处添加一条关于HTML 5 中的自闭合标签的注释。

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

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

记住我们的老 friend <p style="color:red;"><div>Why am I not red?</div></p> ？ HTML 放置 </p>在 <div> 之前因为 <p> 中不允许使用 block 元素标签。

最好的办法就是改掉使用 /> 的习惯。除了始终没有内容的元素( link 、 br 、 img 等——即使那样，您可能只想为了代码可读性而这样做，因为在解析中，它绝对没有区别)。

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