我正在为我的组织开发一个用 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>
最佳答案
看起来 IE 忘记了让这些新元素可聚焦,当它们有滚动条时。您可以通过将 tabindex
添加到 section
标记来解决此问题,至少适用于 IE10。
现场演示 jsFiddle .
关于css - IE 键盘在 HTML5 语义元素内滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19882978/