溢出:叠加在Firefox中不起作用

Question

在我的网站,我需要使用CSS属性overflow: overlay了<div>.

但是,它没有在浏览器中呈现,并且对firebug中的css的检查显示它甚至不存在,但它在Chrome中是有效的.我没有测试过野生动物园.

我必须改变什么来使overflow: overlaycss属性工作？

谢谢

Answer 1

溢出的可能值是:

visible
hidden
auto
scroll

请参阅此处或此处以了解这些内容.

在不同浏览器中使用任何其他值将产生不可预测的结果,因为它们以不同方式处理不正确的值.

编辑:在评论之后,我设法找到了溢出:覆盖在这里.

叠加描述为:

剪辑内容并在必要时添加滚动条.

重要的是它还说只能在Safari或Chrome(即WebKit)中工作.

WebKit bugzilla上的这个项目表明在任何情况下这个世界都不长:

WebKit目前有一个名为"overlay"的专有CSS溢出值,它没有文档记录,据我所知,读取代码的工作方式与"auto"完全相同.

我们应该删除它或将其重命名为"-webkit-overlay".

2016年3月更新

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

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

但是有一点不同:使用`auto`,滚动条将添加到x-overflow上的元素下方.使用`overlay`,它被添加到元素中!这意味着不会占用额外的屏幕区域,但元素本身内的文本会受到滚动条的阻碍.这是一个微妙但有用的差异.在Chromium上测试过. (61认同)
"overflow:overlay"与"overflow:auto"不同.如果通过给滚动条赋予一些宽度来设置滚动条的样式,则这两个属性具有不同的效果.在覆盖的情况下,滚动条不会推动内容,因为它漂浮在内容之上并且不在正常文档流中.但是在"溢出:自动"的情况下,滚动条占用一些宽度(由您指定),并按照任何流入元素推送内容. (5认同)