Прокрутка не работает внутри блока <a>в Firefox - PullRequest
Новая
       20

Прокрутка не работает внутри блока <a>в Firefox

2 голосов
/ 13 июля 2011

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

Ответы [ 3 ]

2 голосов
/ 13 июля 2011

Согласно w3-валидатору , UL не допускается в a, любое отсутствие спецификаций может привести к нежелательным результатам

1 голос
/ 13 июля 2011

Другой вариант - избегать использования события размытия и вместо этого закрывать его, когда вы щелкаете в другом месте на странице, кроме этого виджета.

Это jquery: 

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

    $("#monther .month").hide();
}
0 голосов
/ 13 июля 2011

Ваша структура документа недействительна. <ul> является элементом уровня блока , <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>

Смотрите его в действии здесь. <ul> скрывается после того, как содержащийся <div> теряет фокус в IE, Chrome и Firefox.

...