溢出：覆盖在 Firefox 中不起作用

Posted 2023-03-06

【中文标题】溢出：覆盖在 Firefox 中不起作用

【英文标题】：Overflow: overlay doesn't work in firefox

【发布时间】：2012-01-22 12:58:14

【问题描述】：

在我的网站上，我需要将 css 属性 overflow: overlay 用于 <div>。

但是，它没有在浏览器中呈现，并且在 firebug 中检查 css 显示它甚至不存在，但它在 Chrome 中可以正常工作。我还没有测试过 safari。

我必须进行哪些更改才能使overflow: overlay css 属性正常工作？

谢谢

【参考方案1】：

溢出的可能值为：

visible
hidden
auto
scroll

请参阅 here 或 here 了解有关这些内容的讨论。

在不同的浏览器中使用任何其他值都会产生不可预知的结果，因为它们处理不正确的值的方式不同。

编辑：在评论之后，我设法找到了对溢出的提及：overlay here。

叠加被描述为：

内容被剪裁并在必要时添加滚动条。

重要的是，它也只适用于 Safari 或 Chrome（即 WebKit）。

WebKit bugzilla 上的This item 建议无论如何这个世界都不长：

WebKit 目前有一个名为“overlay”的专有 CSS 溢出值，它没有被记录在案，据我阅读代码可以看出，它的工作方式与“auto”完全一样。

我们应该删除它或将其重命名为“-webkit-overlay”。

2016 年 3 月更新

看起来overflow: overlay 还没有消失。有迹象表明它正在进入标准。

overlay 和auto 之间的区别仅在于滚动条会出现在页面内容的顶部，而不会占用布局空间。

见here for the discussion。

【讨论】：

叠加的工作方式与自动相同。 （必要时添加滚动条）

但是有一点不同：使用auto，滚动条添加到 x-overflow 上的元素下方。使用overlay，它被添加到元素中！这意味着不会占用额外的屏幕空间，但元素本身内的文本会被滚动条挡住。这是一个微妙但有用的区别。在 Chromium 上测试。

“溢出：覆盖”与“溢出：自动”不同。如果您通过给滚动条一些宽度来设置它的样式，那么这两个属性都有不同的效果。在覆盖的情况下，滚动条无论如何都不会推送内容，因为它浮动在内容之上并且不在正常的文档流中。但是在“overflow: auto”的情况下，滚动条会占据一些宽度（由您指定），并像任何流入元素一样推送内容。

MDN 网络文档建议不要使用 overflow: overlay developer.mozilla.org/en-US/docs/Web/CSS/overflow 。另请查看 bugzilla.mozilla.org/show_bug.cgi?id=1521631