css - IE 键盘在 HTML5 语义元素内滚动

Question

我正在为我的组织开发一个用 PHP 编写的内部网络应用程序。不幸的是，HTML 和 CSS 不属于我的专长，所以我必须边走边自学很多表示方面的知识。

我想实现一个包含一些内容的基本滚动框。在大多数情况下，我已经让它工作了。但是，我无法在 IE (9, 10, 11) 中使用 keyboard 在 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 忘记了让这些新元素可聚焦，当它们有滚动条时。您可以通过将 tabindex 添加到 section 标记来解决此问题，至少适用于 IE10。

现场演示 jsFiddle .