css - 如何防止在 Chrome 中聚焦时显示隐藏元素？

Question

今天我有一个奇怪的问题，在 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;
}

谢谢你的帮助 ！

干杯！

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>

更新：

在处理我自己的一些焦点问题时，我意识到还有另一种可能的解决方案。如果您需要稍后通过 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 动态使其可见。