如何防止在Chrome中显示隐藏元素？ [英] How to prevent hidden element to be shown when focused in Chrome?

问题描述

我现在有一个奇怪的问题，在Chrome中，当我专注于一个元素是绝对定位在其溢出隐藏容器，它在Chrome浏览器（Mac）中可见。

I have a strange problem today, in Chrome, when I focus on an element that is absolutely positioned out of its overflow hidden container, it gets visible in Chrome browser (Mac).

我做了一个小提示来说明问题： http://jsfiddle.net/GHgtc/

I've made a fiddle to illustrate the problem : 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;
}

感谢您的帮助！

干杯！

推荐答案

在内部按钮上使用tabindex = - 1。这将防止焦点。
http://jsfiddle.net/GHgtc/2/

Use tabindex="-1" on your "inner-button". That will prevent focus. 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>

更新：

另一个可能的解决方案，同时在我自己的一些焦点问题上工作。您可以使用z-index：-1，如果您需要的焦点稍后通过javascript事件触发。

I realized there is another possible solution to your issue while working on some focus issue of my own. You can use z-index:-1 if the focus you need is to be triggered later via javascript event.

#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动态显示。

That will keep it focusable but hidden. And you can make it visible back with z-index:0 dynamically.

这篇关于如何防止在Chrome中显示隐藏元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！