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已经忘记了当这些新元素具有滚动条时可以集中注意力。您可以通过向tabindex添加section标记来解决此问题，至少适用于IE10。

jsFiddle的现场演示。

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

1 个答案: