开发者

Scroll doesn't work inside <a> block in Firefox

In Firefox, I am unable to scroll by dragging the scroll bar inside an <a> block:

<a id="monther" class="single" href="">
    <span&开发者_开发知识库gt;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>

Things of note:

  • This works fine in other browsers I tried
  • If I change the <a> to a <div> it works fine in Firefox as expected
  • I can still scroll using the mousewheel, or by clicking the arrows at either end of the scrollbar (in Firefox)

The reason I am using <a> is because I am binding it's blur event to hide the <ul>.


According to w3 validator, UL is not allowed in a, any omit of specifications can produce unwelcome results


Another option is to avoid using the blur event and instead close it when you click anywhere else on the page except for that widget.

This is jquery:

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

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


Your document structure is invalid. <ul> is a block-level element, <a> is an inline element; inline elements are not allowed to contain block-level elements, only other inline elements. (Block-level elements may contain either.) That this works in other browsers is an implementation-dependent quirk and you should not count on it continuing to work in the future.

The proper way to solve this is to make a containing <div> focusable by adding a tabindex attribute:

<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. The <ul> hides after the containing <div> loses focus in IE, Chrome, and Firefox.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜