Css IE键盘在HTML5语义元素中滚动

我正在为我的组织开发一个用PHP编写的内部web应用程序。不幸的是，HTML和CSS并不是我的专长，所以我必须在学习过程中教会自己很多演示方面的知识

我想实现一个包含一些内容的基本滚动框。在大多数情况下，我已经让它工作了。但是，我不能使用IE（9、10、11）的键盘在HTML5语义元素中滚动（

部分

，

文章

，

导航

，等等）。常规的

div

工作正常。无论元素是什么，Firefox和Chrome都没有问题

为了清楚起见，当直接操作（即单击或拖动）时，滚动条是可见的、活动的，并且功能正常。鼠标滚轮也可以正常滚动。似乎只有键盘箭头是个问题。我可以耸耸肩，完全放弃HTML5语义标记（除了可读性之外，它们没有任何功能上的用途），但我宁愿找出问题所在

是否有一些事情我做得不对，或者我遇到了需要解决的IE bug？我已经尝试了几个小时的搜索/实验，但似乎找不到解决方案

CSS

.scrollable {
    height: 75px;
    width: 150px;
    border: solid black 1px;
    overflow-x: hidden;
    overflow-y: auto;
}

HTML

<section class="scrollable">
    IE <em>can not</em> keyboard scroll this.<br />
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
</section>
<div class="scrollable">
    IE <em>can</em> keyboard scroll this.<br />
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
</div>

IE无法通过键盘滚动此项。


项目1
项目2
项目3
项目4
项目5
项目6

IE可以通过键盘滚动此项。


项目1
项目2
项目3
项目4
项目5
项目6

看起来IE在使用滚动条时忘记了将这些新元素设置为可聚焦。您可以通过将

选项卡index

添加到

部分

标记来解决此问题，该标记至少适用于IE10

---

现场演示。

真棒，就是这样。我从来没有想过要尝试一下。