Question

在Firefox中，我无法通过拖动<a>块内的滚动条进行滚动：

<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>

注意事项：

这在我尝试的其他浏览器中运行良好
如果我将<a>更改为<div>，则可以按预期在Firefox中正常工作
我仍然可以使用鼠标滚轮滚动，或点击滚动条两端的箭头（在Firefox中）

我使用<a>的原因是因为我绑定了blur事件以隐藏<ul>。

Answer 1

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

Answer 2

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

这是jquery：

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

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

Answer 3

您的文档结构无效。 <ul>是block-level element，<a>是内联元素;内联元素不允许包含块级元素，只允许包含其他内联元素。（块级元素可能包含。）这在其他浏览器中有效是一个依赖于实现的怪癖，你不应指望它将来继续工作。

解决此问题的正确方法是通过添加<div>属性来调整包含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>

See it in action here. <ul>隐藏在<div>包含IE，Chrome和Firefox的重点后隐藏{/ 1}}。

滚动在<a> block in Firefox</a>内无效

3 个答案: