正文 

当前位置： 首页 > 知识 >

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

     2023-03-06     66

关键词：

【中文标题】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 仍然可以聚焦元素，这会导致相同的奇怪行为。 是的，因为我不太清楚他想要什么。呵呵

溢出：隐藏；不适用于带有 IFRAME 的 Chrome？

...】：我有一个IFRAME，在css和html中隐藏了溢出。它适用于Firefox，但不适用于Chrome/Safari这是为什么？【问题讨论】：【参考方案1】：对，怎么样：<iframescrolling="n 查看详情

带有过渡和 translateY 的 Safari 错误：“跳跃”元素

...题描述】：我正在使用translateY移动一个元素。在Chrome、Firefox、IE、Edge除了Safari（12.1.2和13.1.2）和GNOMEWeb(WebKit)下 查看详情

溢出：隐藏不适用于 Chrome 中的伪元素

】溢出：隐藏不适用于Chrome中的伪元素【英文标题】：Overflow:hiddennotapplyingtoapseudoelementinChrome【发布时间】：2015-04-1620:43:05【问题描述】：我正在生成一个“灰色主题”——尽管仍有一些调整需要做，但我对此相当满意。GrayTheme... 查看详情

如何使 CSS3 圆角在 Chrome/Opera 中隐藏溢出

...器和Opera中，当父级相对或绝对定位时会中断。这适用于Firefox和IE9：C 查看详情

Firefox 在使用溢出时忽略填充：滚动

】Firefox在使用溢出时忽略填充：滚动【英文标题】：Firefoxignorespaddingwhenusingoverflow:scroll【发布时间】：2015-07-1106:59:51【问题描述】：当使用overflow:scroll结合padding:/*...*/CSS属性时，Firefox中缺少元素底部的填充。（但适用于Chrome和S... 查看详情

在 Chrome 和 Edge 中使用 jQuery 闪烁隐藏和显示元素

...】：我正在尝试使用jQuery制作一个简单的动画，该动画在Firefox中运行良好，但在Chrome和Edge中闪烁，这是jsfiddle，这是代码：HTML<divid="boxes 查看详情

在 Firefox 和 IE 中忽略没有内容的溢出元素的 padding-bottom

】在Firefox和IE中忽略没有内容的溢出元素的padding-bottom【英文标题】：padding-bottomisignoredinFirefoxandIEonoverflowingelementswithnocontent【发布时间】：2014-01-0416:06:32【问题描述】：这个问题与这两个有关：1.css-applyingpaddingtoboxwithscroll,bottom-... 查看详情

在 Safari、Firefox 和 Edge VS Chrome 上带有（溢出-y）滚动的 flexbox 的不同行为

】在Safari、Firefox和EdgeVSChrome上带有（溢出-y）滚动的flexbox的不同行为【英文标题】：Differentbehaviorofflexboxwith(overflow-y)scrollonSafari,FirefoxandEdgeVSChrome【发布时间】：2017-08-2718:42:41【问题描述】：在plunker(https://plnkr.co/edit/gMbgxvUqHNDsQVe4... 查看详情

Webkit 不考虑溢出：以边界半径隐藏

...，因此任何内容都会被裁剪为边框半径的形状。这一切在Firefox中运行良好，但Webkit浏览 查看详情

溢出-y：隐藏，但仍然可以在 android 上使用 firefox 滚动

】溢出-y：隐藏，但仍然可以在android上使用firefox滚动【英文标题】：overflow-y:hidden,butstillscrollablewithfirefoxonandroid【发布时间】：2015-10-3106:01:33【问题描述】：我使用jquery在叠加​​层中打开部分视图（显示固定div并禁用底层网页... 查看详情

隐藏部分溢出的元素

】隐藏部分溢出的元素【英文标题】：Hidepartiallyoverflownelements【发布时间】：2018-02-0304:53:04【问题描述】：我正在寻找一种纯CSS方法来隐藏已部分溢出其容器的div3。见附图。【问题讨论】：你能提供一个带有你的标记和特定css... 查看详情

非常简单的 flexbox 布局，带有溢出：隐藏——Firefox 中的垂直错位

】非常简单的flexbox布局，带有溢出：隐藏——Firefox中的垂直错位【英文标题】：Extremelysimpleflexboxlayout,withoverflow:hidden--verticalmis-alignmentinFirefox【发布时间】：2015-09-1622:44:07【问题描述】：我试图将两个弹性项目并排放置，基线... 查看详情

锚元素在 Firefox 和 chrome 中不起作用

】锚元素在Firefox和chrome中不起作用【英文标题】：Anchorelementnotworkinginfirefoxandchrome【发布时间】：2011-06-2013:09:08【问题描述】：我的客户网站上的图片上有一个超链接。它在IE中工作，但是当我在Chrome/Mozilla中打开同一页面时，... 查看详情

IE+溢出：隐藏

...页面底部时，页面正在滚动（我试过IE9-IE11）！当我使用Firefox/Opera/Chrome/Safari时，页面没有滚动……我必须使用overflow:hidden，但它在IE中有一个奇怪的行为 查看详情

在没有隐藏溢出的情况下，transitionend 事件在 FireFox 中没有持续触发

】在没有隐藏溢出的情况下，transitionend事件在FireFox中没有持续触发【英文标题】：ThetransitionendeventisnotfiringconsistentlyinFireFoxwithoutoverflowhidden【发布时间】：2013-04-1919:45:13【问题描述】：我在Firefox(v20.0.1)上遇到了一个问题，它不... 查看详情

Flexbox垂直对齐溢出[重复]

...容的顶部实际上将被隐藏并且无法通过滚动访问。Chrome和Firefox的 查看详情

position:absolute用法（隐藏溢出部分）

...址：https://www.cnblogs.com/goloving/p/9275776.html1、绝对定位元素溢出父元素，怎么隐藏问题？通常，为了让DIV子元素超出部分隐藏，都是在父元素设置overflow:hidden，这样即可防止子元素撑开父元素，使子元素能够溢出隐藏！但是，对于... 查看详情

隐藏的 jQuery 可拖动包含溢出

】隐藏的jQuery可拖动包含溢出【英文标题】：jQueryDraggableContainmentOverflowHidden【发布时间】：2016-05-2512:01:24【问题描述】：这是关于拖动比其父元素更宽的元素（溢出：隐藏）。父级的宽度和溢出选项是固定的，不能更改。HTML<... 查看详情