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

Question

我正在为我的组织开发一个用PHP编写的内部Web应用程序。不幸的是，HTML和CSS不是我的专长，所以我必须自学很多演示方面。

我想实现一个包含一些内容的基本滚动框。在大多数情况下，我已经让它工作了。但是，我不能将键盘与IE（9,10,11）一起使用在HTML5语义元素（section，article，nav等）内滚动。常规div工作正常。Firefox 和 Chrome 无论元素如何都没有问题。

需要明确的是，滚动条是可见的、活跃的，并且在直接操作（即单击或拖动）时功能正常。鼠标滚轮也可以很好地滚动。只有键盘箭头似乎是一个问题。我可以耸耸肩，完全放弃HTML5语义标签（除了可读性之外，它们没有功能用途），但我宁愿弄清楚出了什么问题。

是我做错了什么，还是遇到了需要解决方法的IE错误？我已经尝试了几个小时的搜索/实验，似乎找不到解决方案。

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

Answer 1

看起来IE忘记了让这些新元素在滚动条时可聚焦。您可以通过向section标记添加tabindex来解决此问题，至少适用于IE10。

jsFiddle的现场演示。