Chrome和Firefox溢出：隐藏的跳跃元素

Posted 2023-03-06

【中文标题】Chrome和Firefox溢出：隐藏的跳跃元素

【英文标题】：Chrome and Firefox overflow:hidden jumping elements

【发布时间】：2015-09-07 21:30:49

【问题描述】：

当你有一个带有“position:relative;”的元素时，我偶然发现了 Chrome 和 Firefox 中发生的一种奇怪行为和“溢出：隐藏；”和一个带有“位置：绝对；”的锚。

每当锚点获得焦点时，它上面的元素就会神奇地跳到顶部，即使它的样式和标记讲述的是不同的故事。

示例：http://codepen.io/mediadivisiongmbh/pen/pJWmxp

您只需要一个类似的设置：

html

<div class="container">
  <h1>I can fly</h1>
  <a class="focus-me" href="#">Evil Link</a>
</div>

CSS

.container 
    position:relative;
    overflow:hidden;

    /* Optional */
    border:1px solid gray;


.focus-me 
    position:absolute;

到目前为止，感谢您的回答。为了澄清这个问题，请看一下这个例子：

http://codepen.io/mediadivisiongmbh/pen/bdRjKy

当您将鼠标悬停在容器上时，包含锚点的绝对定位元素将在视图中转换。当您单击它时，会打开一个灯箱（在本例中为 Magnific Popup）。关闭此灯箱后，锚点再次获得焦点并跳入视野，这看起来很奇怪。

默认情况下将锚点设置为display:none，将鼠标悬停在容器上时设置为display:block 可以解决此问题。

【问题讨论】：

它当然会跳起来，因为它想把你选择的东西放在焦点上。浏览器将尝试将其显示在视图中，并通过向上移动 p 来实现。 overflow:hidden 仅在它不适合 .container 时确保它不可见，但是当您通过按 TAB 将焦点放在它上时，它就会被拉入视野。另外，为什么您想要您尝试创建的功能，这在我之上。

@Rvervuur​​t：我已经更新了问题，以便您可以在更实际的情况下查看问题。

【参考方案1】：

经过更多研究，我发现问题是由 chrome 中的辅助功能引起的。

在我的例子中，我只需要确保只有在将鼠标悬停在容器元素上时才能访问锚标记。

因此解决方案是像这样改变 CSS：

.container 
    position:relative;
    overflow:hidden;

    /* Optional */
    border:1px solid gray;


.focus-me 
    position:absolute;
    display:none;


.container:hover .focus-me 
    display:inline-block;

【参考方案2】：

我不太清楚你在寻找什么，因为你有different story。但是，如果您的意思是由于关注链接而要防止跳转，则可以在链接上使用tabindex="-1" 以使其不接受制表位。检查Updated Pen

编辑

好吧，当你看到你的笔时，我认为你需要将display: none 设置为你的邪恶链接，并在悬停到你的容器时将其设置为display: inline-block。检查Updated Pen。

【讨论】：

如果您只想确保锚点没有使用 TAB 聚焦，则此解决方案有效。但是通过 javascript 仍然可以聚焦元素，这会导致相同的奇怪行为。

是的，因为我不太清楚他想要什么。呵呵