2

我正在为我的组织开发一个用 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>
4

1 回答 1

0

看起来 IE 忘记让这些新元素具有焦点时，它们具有滚动条。tabindex您可以通过添加to标签来解决此问题section，至少适用于 IE10。

jsFiddle的现场演示。

于 2013-11-10T12:48:04.190 回答