滚动在 内不起作用在 Firefox 中阻止

Question

在 Firefox 中，我无法通过拖动 块内的滚动条来滚动：

<a id="monther" class="single" href="">
    <span>Month</span>
    <ul class="month" style="height:100px;width:200px;overflow:auto;">
        <li id="1310421600">Jul 2011</li>
        <li id="1307829600">Jun 2011</li>
        <li id="1305151200">May 2011</li>
        <li id="1302559200">Apr 2011</li>
        <li id="1299884400">Mar 2011</li>
        <li id="1297465200">Feb 2011</li>
        <li id="1294786800">Jan 2011</li>
        <li id="1292108400">Dec 2010</li>
        <li id="1289516400">Nov 2010</li>
    </ul>
</a>

值得注意的是：

• 这在我尝试过的其他浏览器中工作正常
• 如果我更改 到
  它在 Firefox 中工作正常，正如预期的那样
• 我仍然可以使用鼠标滚轮滚动，或者通过单击滚动条两端的箭头（在 Firefox 中

）我正在使用 是因为我绑定了它的 blur 事件来隐藏

。

Answer 1

根据 w3 验证器，a 中不允许使用 UL，任何规范的省略都会产生不受欢迎的结果

Answer 2

另一种选择是避免使用模糊事件，而是在单击页面上除该小部件之外的任何其他位置时关闭它。

这是jquery：

$(document).click(function(evt) {
    if($(evt.target).parents("#monther").length != 0) {
        return;
    }

    $("#monther .month").hide();
}

Answer 3

您的文档结构无效。

是一个块级元素，< code> 是内联元素；内联元素不允许包含块级元素，只能包含其他内联元素。 （块级元素可能包含其中任何一个。）这在其他浏览器中工作是一个依赖于实现的怪癖，您不应该指望它在将来继续工作。

解决此问题的正确方法是通过添加 tabindex 属性使包含的

可聚焦：

<div id="monther" class="single" tabindex="0">
    <span>Month</span>
    <ul class="month" style="height:100px;width:200px;overflow:auto;">
        <li id="1310421600">Jul 2011</li>
        <li id="1307829600">Jun 2011</li>
        <li id="1305151200">May 2011</li>
        <li id="1302559200">Apr 2011</li>
        <li id="1299884400">Mar 2011</li>
        <li id="1297465200">Feb 2011</li>
        <li id="1294786800">Jan 2011</li>
        <li id="1292108400">Dec 2010</li>
        <li id="1289516400">Nov 2010</li>
    </ul>
</div>

在此处查看实际操作。

在包含的
失去焦点后隐藏IE、Chrome 和火狐。