Jak zapobiec wyświetlaniu ukrytego elementu po ustawieniu ostrości w przeglądarce Chrome?

Question

Mam dziwny problem dzisiaj, w Chrome, kiedy skupiam się na elemencie, który jest absolutnie umieszczony poza ukrytym kontenerem, staje się widoczny w przeglądarce Chrome (Mac).

Zrobiłem skrzypce do zilustrowania problemu: 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; 
} 

Dzięki za pomoc!

Pozdrawiam!

Answer 1

Użyj tabindex = "- 1" na swoim "wewnętrznym przycisku". To uniemożliwi skupienie. 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:

zdałem sobie sprawę, nie ma innej możliwości rozwiązania problemu podczas pracy na jakiejś kwestii ostrości z moich własnych. Możesz użyć z-index: -1, jeśli fokus, którego potrzebujesz, ma zostać wywołany później przez zdarzenie javascript.

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

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

że zachowa ona aktywowana ale ukryte. I możesz uczynić ją widoczną z powrotem z dynamicznym z-index: 0.