6

今日、Chrome で奇妙な問題が発生しました。オーバーフローした非表示のコンテナーから絶対に配置されている要素にフォーカスすると、Chrome ブラウザー (Mac) で表示されます。

問題を説明するためにフィドルを作成しました: http://jsfiddle.net/GHgtc/

HTML 

    <div id="container">
        <a id="inner-button" href="#">You can see me !</a>
    </div>

CSS

#container{
    display: block;
    background: blue;
    width: 200px;
    height: 30px;
    position: relative;
    overflow: hidden;
}

#inner-button{
    display: block;
    background: red;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    right: -20px;
}

ご協力いただきありがとうございます ！

乾杯 ！

4

1 に答える 1

3

「内側のボタン」で tabindex="-1" を使用します。それは集中を妨げます。 http://jsfiddle.net/GHgtc/2/

<input placeholder="focus on me then press tab" type="text">
<div id="container">
    <a id="inner-button" tabindex="-1" href="#">You can see me !</a>
</div>

アップデート：

私自身の重要な問題に取り組んでいるときに、あなたの問題に対する別の解決策があることに気付きました。必要なフォーカスが後で javascript イベントを介してトリガーされる場合は、 z-index:-1 を使用できます。

#inner-button{
    display: block;
    background: red;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    right: -20px;
    z-index:-1;
}

http://jsfiddle.net/GHgtc/3/

これにより、フォーカス可能ですが非表示になります。また、動的に z-index:0 を使用して可視化することもできます。

于 2013-04-19T09:01:12.417 に答える