2

PHP で記述された、組織用の内部 Web アプリを開発しています。残念ながら、HTML と CSS は私の専門分野ではありません。そのため、プレゼンテーションに関する多くのことを独学で学ばなければなりません。

いくつかのコンテンツを含む基本的なスクロール ボックスを実装したいと考えています。ほとんどの場合、私はそれを機能させました。ただし、IE (9、10、11) でキーボードsectionを使用して、HTML5 セマンティック要素 ( 、、、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 は、スクロールバーがあるときに、これらの新しい要素をフォーカス可能にするのを忘れているようです。tabindextoタグを追加することで問題を解決できますsection。少なくとも IE10 では機能します。

jsFiddleでのライブ デモ。

于 2013-11-10T12:48:04.190 に答える