Chromeにフォーカスしたときに隠し要素が表示されないようにするにはどうすればよいですか？

Question

今日、私は奇妙な問題を抱えています。Chromeでは、オーバーフローした隠しコンテナから絶対的に配置された要素に焦点を合わせると、Chromeブラウザ（Mac）で表示されます。

私は、問題を説明するためのバイオリン作りました：Htmlのhttp://jsfiddle.net/GHgtc/

を

<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; 
} 

あなたの助けをありがとう！

乾杯！

Answer 1

「内側ボタン」に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> 

UPDATE：

私は自分自身のいくつかのフォーカスの問題に取り組んでいる間、あなたの問題への別の可能な解決策があると実感しました。必要なフォーカスが後で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を動的に表示することができます。