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

Question

我今天遇到一个奇怪的问题，在 Chrome 中，当我关注一个绝对定位在其溢出隐藏容器之外的元素时，它在 Chrome 浏览器 (Mac) 中变得可见。

我做了一个 fiddle 来说明这个问题: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 动态地使其可见。